React-router: [v6] <NavLink> is matching parts of words

[thedanwoods]

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]

Add the end prop.

[thedanwoods]

@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]

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

[huttonr]

Potential cause:

https://github.com/ReactTraining/react-router/issues/7529#issuecomment-698674552

[alex-drocks]

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>