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
    </NavLink>

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: https://reactrouter.com/docs/en/v6/api#navlink

Working example: https://codesandbox.io/s/vigorous-thompson-e7k8eb

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