reactjs navlink activeClassName not working on root

Question

I have using react <Navlink> for active route class like this with tailwind-css:

import { NavLink } from 'react-router-dom';

<NavLink to={'/'} activeClassName="text-orange-600 border-orange-600" className="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500">
          Home
</NavLink>

But root (/) is showing always active while I clicked other links.

When go /sale page root / also showing activeclass

I want when go other pages and if /sale then only this links showing activeclasses not others.

Answer 1

you have to add the "exact" keyword for it to work only if "/"

https://reactrouter.com/web/api/NavLink

<NavLink exact to={'/'} activeClassName="text-orange-600 border-orange-600" className="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500">
          Home
</NavLink>