Fixed NavLink Issue

[bilalk711]

Original Issue

NavLink active breaks when to contains trailing slash

Steps to Reproduce

Create a NavLink with end omitted or set to false and with to set to a route path which contains sub-routes and ensure a trailing slash at the end.
Visit a sub-route of the path in use.

Expected Behaviour

With end false, when the current location is a sub-route of a mounted NavLink, then it should be active.

Actual Behaviour

NavLink is considered inactive.

This issue is fixed in this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: 288a6d8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-router-dom	Patch
react-router	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Hi @bilu7111,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[timdorr]

Just as an FYI, your commits aren't attributed to your GitHub account because you don't have your Git email address added. If you add [email protected] to GitHub, you'll get attribution to those commits and the CLA bot will be happy :)

[bilalk711]

Just as an FYI, your commits aren't attributed to your GitHub account because you don't have your Git email address added. If you add [email protected] to GitHub, you'll get attribution to those commits and the CLA bot will be happy :)

Actually the issue was that I changed my username but forgot to add that to contributors.yml

[iamdey]

It's a bit out-of-scope but it would be nice to change the documentation to make it consistent with reality:

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

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

- <NavLink to="/">Home</NavLink>
+ <NavLink to="/page">Page</NavLink> 

+ Exception for `/` which will be active only when url match path exactly

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

- <NavLink to="/" end>
+ <NavLink to="/page" end>
  Home
</NavLink>





Link | URL | isActive
-- | -- | --
<NavLink to="/tasks" /> | /tasks | true
<NavLink to="/tasks" /> | /tasks/123 | true
+ <NavLink to="/tasks/" /> | /tasks | true
+ <NavLink to="/tasks/" /> | /tasks/ | true
+ <NavLink to="/tasks/" /> | /tasks/123 | true
<NavLink to="/tasks" end /> | /tasks | true
<NavLink to="/tasks" end /> | /tasks/123 | false
+ <NavLink to="/tasks/" end /> | /tasks | false
+ <NavLink to="/tasks/" end /> | /tasks/ | true
+ <NavLink to="/tasks/" end /> | /tasks/123 | false

[bilalk711]

@iamdey can you merge it now if you have write access?

[bilalk711]

Updated the documentation as per new changes.

[bilalk711]

@brophdawg11 Do you have write access or can you mention someone with authority who can merge this PR?

[github-actions]

🤖 Hello there,

We just published version 6.19.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.19.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!