The correct answer in 2022 is to use the end prop.

​

<NavLink end {...props} />

As per the docs:

​

If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use

​

<NavLink to="/" end>

  Home

</NavLink>

​

Reference: https://reactrouter.com/en/v6.3.0/api