-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: NavLink active breaks when to
contains trailing slash
#10506
Comments
We have the same issue with: <Navlink to="/">App</Navlink> This link should be always active (since I've manage to reproduce and tried to describe expected behavior, cf. https://stackblitz.com/edit/github-1aweyn?file=src%2FApp.tsx (Tell me if it's not clear enough). And I also suspect when
when
Well with 6.4 after the fix it doesn't seem to be possible to have both cases (active or inactive according to |
See also #9261 (comment): |
@ryanflorence I have fixed this issue for dev |
@timdorr can you review my PR please? |
This is resolved in via #10734 and will be available in the next release |
What version of React Router are you using?
6.10.0
Steps to Reproduce
Create a NavLink with
end
omitted or set to false and withto
set to a route path which contains subroutes and ensure a trailing slash at the end.Visit a subroute of the path in use.
Expected Behavior
With
end
false, when the current location is a subroute of a mounted NavLink, then it should be active.Actual Behavior
NavLink is considered inactive.
This seems to be a result of the following line:
react-router/packages/react-router-dom/index.tsx
Line 576 in f397ad7
Currently, when
end
false and the current locationstartsWith(to)
, we are checking if the next unmatched character is a/
to ensure the last segment wasn't only a partial match. This however is done assuming thatto
didn't already have a trailing slash which is not currently guaranteed to be the case. As such when it does contain a trailing slash it ends up comparing against the following character.Unfortunately I could not create a repro via StackBlitz as the template was giving me an esbuild error at the time. Happy to provide this if StackBlitz starts working again.
The text was updated successfully, but these errors were encountered: