NavLink exact prop not working for react-router-dom 6

Exact param will no longer working on NavLink component. In version 6 Beta they have included a new param called: end

With this simply approach you just need to pass end param for your NavLink component and exact to you Route

<NavLink end to="/">
      Go to Home

When you write end="another-class-active" you can change your active className which is active by default.

As @Greg Wozniak mentioned end is a boolean so you can’t change active class name with this, instead of this you can pass a function to className:

className={({ isActive }) =>
    isActive ? 'activeClassName' : undefined

For more information read this:

Working example:

Note that this is still version Beta so we need to wait for some fixes and official releases

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top