CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
nibble
nibble

Reputation: 404

activeClassName not working in react router NavLink after page redirect

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?

Upvotes: 0

Views: 1166

Answers (1)

K.P
K.P

Reputation: 524

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

Upvotes: 1

Related Questions