Topic: MDBNavLink is always active when pointing to baseurl
Christian Aichner pro asked 5 years ago
Expected behavior
Two issues here.
1) When the MBNavLink
is pointing to /
, it should only be active if the react-router-dom pathname
is /
.
2) When adding active={false}
to <MDBNavLink>
it should no longer have the active
class. (This is most likely a result of the first issue)
Actual behavior
1) When <MDBNavLink to="/">
the item is always active.
2) Even after adding active={false}
to both NavLink and NavItem the item stayed active.
Ressources
Christian Aichner pro answered 5 years ago
Solved!
This was not a MDB related issue. After looking in the MDB React code, I discovered, that there is almost no additional work done other than mapping the component props to the react-router-dom Link
and NavLink
.
Giving the exact
prop to MDBNavLink
fixed the issue.
Ref: https://github.com/ReactTraining/react-router/issues/5118
This should be added to your documentation!
Best regards, Chris
Jakub Chmura staff answered 5 years ago
We've added a link
props to the MDBNavLink component that changes NavLink
to Link
Component from react-router-dom
You can read about this HERE at API Tab.
In the future, we add a new component like MDBLink to use it as a link
from react-router-dom
to separate NavLink from Link.
I'm happy that you find the solution to your problem. If there is anything else I could do for you do not hesitate to ask me.
Best regards,
Kuba
Christian Aichner pro commented 5 years ago
Yeah, that does - however - not fix the problem. Because the <Link>
item also requires an exact
to not always be active when to="/"
.
Jakub Chmura staff commented 5 years ago
Sure,
We add information about this to our documentation soon. Thank you very much for your feedback!
Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.1
- Device: Desktop
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: Yes