activeClassName not working in react router NavLink after page redirect

Question

I have react router NavLinks in my app. One of them is below:

<NavLink exact to = {{pathname: "/", state: {genreId: 0}}} activeClassName = "active-menu" > Movies </NavLink>

In the Router , i am redirecting from / to /movies/all . The problem is after redirecting, the activeClassName no longer works. The other routes not redirected are fine. How can i make the activeClassName work with redirected path?

Answer 1

Try removing exact from NavLink with exact the activeClassName will be applied only if the location is matched exactly.

Note - Make sure the current location matches the pathname in NavLink for activeClassName to work. Also, if exact is removed from /movies then it will be active for sub paths like /movies/all .

You can read more here