NavLink isActive is not returning true on all paths with multiple paths on same component

[kentrh]

Version

5.0.0

Test Case

https://codesandbox.io/s/react-router-1pf7h

Steps to reproduce

1. Add <Route> with multiple paths
2. Set something that uses the active prop like activeClassName or activeStyle on <NavLink>

Expected Behavior

Maybe I'm totally off here and misunderstood something fundamental, but in my mind it would make sense that both / and /two in the test case should be active when url is /

Actual Behavior

Only / is active when url is / when both / and /two are set ass paths for the Home component.

[timdorr]

NavLink doesn't expect the path to be an array. We should probably handle that.

[StringEpsilon]

IIRC the path array is local to the Route. So NavLink can't know about what other options the Route matches. And IMHO, it shouldn't.

But we probably should allow NavLink to also "match" multiple paths just like Route.

#5368 would offer a way to hack that in manually.

Not sure how we could do this cleanly. Allowing an array for the "to" prop is a bit icky:

<NavLink to={["/", "/two"]} />

And stuffing the path array into the match object is a bit hacky too.

[timdorr]

That wouldn't work semantically anyways. Which path does that link to exactly?

[StringEpsilon]

I had another idea: We do have an isActive function https://reacttraining.com/react-router/web/api/NavLink/isactive-func

We could provide a helper function for matching a path array:

<NavLink to="/" isActive={onPaths(["/", "/two"])} />

Edit: here is a sandbox demonstrating it: https://codesandbox.io/s/react-router-63bti

Another way would simply to add another prop:

<NavLink to="/" alternatePaths={["/", "/two"]} />

[timdorr]

Eh, that seems like low value for what is just this:

<NavLink to="/" isActive={({ path }) -> ["/", "/two"].includes(path)} />

[thewillhuang]

you mean

<NavLink to="/" isActive={(_, { pathname }) => ["/", "/two"].includes(pathname)} />

[lubelski]

so I am trying to do this or something similar, and I am running into the same issues. I want to link to a particular place, but light up the link if it is kind of nearby.

what I want to be able to do is something like...

<NavLink to="/one" path={["/one", "/two"]}/>

more concrete example: I want to click on the link to go directly to a recent user, but the link should show that the section is active regardless of which user or any is selected.

<NavLink to="/users/abc123" path={["/users"]}/>

I tried using the isActive prop but this appears to only be called with a match if the to was matched, so it's only good to be more specific, but can't seemingly be used to be less.

is there some trickery that can be done with the current API to get this to work?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.