Topic: MDBNavLink is always active when pointing to baseurl
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
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
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 premium commented a year 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 premium commented a year ago
Sure,
We add information about this to our documentation soon. Thank you very much for your feedback!
Best Regards,
Kuba
Resolved
- User: Pro
- Premium support: Yes
- Technology: React
- MDB Version: 4.21.1
- Device: Desktop
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes