[Bug]: NavLink always active for root url

[JulSeb42]

What version of React Router are you using?

6.4.0

Steps to Reproduce

Add to your navigation component and visit another page:

<NavLink to="/">Home</NavLink>

Expected Behavior

This code being compiled to

<a href="/">Home</a>

while being on any other route like /about

Actual Behavior

This is compiled to:

<a aria-current="page" class="active" href="/">Home</a>

while being on /about

[kiliman]

I believe you need to add the end prop to match exact path.

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>

https://reactrouter.com/en/main/components/nav-link

[JulSeb42]

Thanks it's working. But I always did it without the end prop and it always worked, why did this change? (I started with the v5, so it's been a while haha)

[timdorr]

https://reactrouter.com/en/main/upgrading/v5#rename-navlink-exact-to-navlink-end

[JulSeb42]

Ok weird, I have a few other projects using V6 and it was working without end. Anyways, thanks!

[t-fritsch]

Same here : with rr 6.1 and 6.3 (not tested with 6.0 nor 6.2) NavLink had "end" behavior by default, why did it change in 6.4 ? Shouldn't this be considered as a regression or a breaking change ?

[brophdawg11]

I don't believe anything changed about end from 6/3 to 6.4. It defaulted to end=false in 6.3.0 as well: https://github.com/remix-run/react-router/blob/v6.3.0/packages/react-router-dom/index.tsx#L317

Here's a quick code sandbox showing the behavior: https://codesandbox.io/s/navlink-end-behavior-otpymz?file=/src/index.js

[t-fritsch]

Thanks a lot for your reply and codesandbox, @brophdawg11, I played a little bit with it and I think that the problem seems to occur on root NavLinks (<NavLink to="/">).

In your code, if you navigate to "/parent", the "/" NavLink isn't active in 6.0, 6.1, 6.2, 6.3. It gets activated only in 6.4.

Having parents active by default when children routes are visited seems legit, but having the "Home" link always active by default seems quite weird. Pre 6.4 versions were fine on this, don't you think ?

[brophdawg11]

Thank you for digging deeper into that @t-fritsch, I don't think any of us quite caught the nuance around the end behavior change from 6.3 to 6.4 for root paths. I just fixed this in #9497 and should have a prerelease out tomorrow and a stable 6.4.3 early next week.

[t-fritsch]

Awesome ! Thanks a lot @brophdawg11 🙏

[awreese]

So why is the root "/" route treated differently? According to docs the end prop should need to be added to path="/" to get the behavior of not matching sub-routes, otherwise it should be matched, right?

end
The end prop changes the matching logic for the active and pending states to only match to the "end" of the NavLink's to path. If the URL is longer than to, it will no longer be considered active.

Without the end prop, this link is always active because every URL matches /.

<NavLink to="/">Home</NavLink>

To match the URL "to the end" of to, use end:

<NavLink to="/" end>
  Home
</NavLink>

Now this link will only be active at "/".

Are the docs just flat out wrong? Have they been incorrect this entire time, save for v6.4.0-6.4.2?

[brophdawg11]

I think the docs were incorrect - updated in #10757.