Skip to content
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

[v6] <NavLink> is matching parts of words #7523

Closed
thedanwoods opened this issue Jul 28, 2020 · 10 comments
Closed

[v6] <NavLink> is matching parts of words #7523

thedanwoods opened this issue Jul 28, 2020 · 10 comments

Comments

@thedanwoods
Copy link

Version

v6.0.0-beta.0

Test Case

https://codesandbox.io/s/kind-margulis-9n81x?file=/src/App.js

Steps to reproduce

In the sandbox above, navigate to /hamburger

Expected Behavior

The <NavLink /> should apply the activeClassName on the /hamburger link, but not the /ham link.

Actual Behavior

It applies the activeClassName to both /ham and /hamburger when we are on /hamburger.

This is not what you'd expect, and not what's happening in v5 - see https://codesandbox.io/s/strange-platform-zythu?file=/src/App.js for the v5 behaviour.

@timdorr
Copy link
Member

timdorr commented Jul 28, 2020

Add the end prop.

@timdorr timdorr closed this as completed Jul 28, 2020
@thedanwoods
Copy link
Author

@timdorr Please re-open: adding end doesn't fix the issue. I've updated the sandbox with additional /ham/details and /hamburger/details routes so you can see what I mean.

If you add the end prop, it does not match /ham if you are on /hamburger, but it also does not match /ham if you are on /ham/details.

Expected behaviour for <NavLink to="/ham"> would be to apply activeClassName if you are on /ham or /ham/details, but not /hamburger.

@timdorr
Copy link
Member

timdorr commented Jul 28, 2020

Ah, I see what you mean. Sorry about that.

@timdorr timdorr reopened this Jul 28, 2020
@huttonr
Copy link

huttonr commented Sep 25, 2020

Potential cause:

#7529 (comment)

@alex-drocks
Copy link

Hello. I've been wondering for a while, why I had troubles with Switch always matching a route I made out of a french word.

About in french is "À propos" so I was using /a-propos for a route:

<li><NavLink to="/a-propos">À propos</NavLink></li>

Problem is that it always seem to match.
Fixed the matching issue by removing the "-"

<li><NavLink to="/apropos">À propos</NavLink></li>

@gnapse
Copy link

gnapse commented Dec 13, 2020

Does #7660 fix this as it claims? It would be good to have it released if so.

@stale
Copy link

stale bot commented Feb 13, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

@stale stale bot added the stale label Feb 13, 2021
@caseyjhol
Copy link

@timdorr This needs a fresh label.

@stale stale bot removed the stale label Feb 13, 2021
@thedanwoods
Copy link
Author

This is still a bug in v6.0.0-beta.1

mjackson added a commit that referenced this issue Oct 2, 2021
@mjackson
Copy link
Member

mjackson commented Oct 7, 2021

This was fixed in 3b54be1 and will be released today in beta.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants