Topic: MDBNavLink is always active when pointing to baseurl

Christian Aichner pro asked 3 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

GitHub: https://github.com/aichner/Company-Homepage/blob/add-content-3/src/components/molecules/Navbar/index.jsx


Christian Aichner pro answered 3 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 3 years ago


Hi @Christian Aichner,

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 3 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 3 years ago

Sure,

We add information about this to our documentation soon. Thank you very much for your feedback!

Best Regards,

Kuba



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: 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