[Bug]: NavLink isn't triggered for routes with params that need uriEncoding

[lifeiscontent]

What version of React Router are you using?

6.4.3

Steps to Reproduce

I have a route called:

/profiles/:username

where if someone has a username like Magda Parry the browser properly encodes the URI to /profiles/Magda%20Parry but NavLink doesn't trigger an active state when it should. e.g:

                  <NavLink
                    className={(props) =>
                      clsx("nav-link", {
                        active: props.isActive,
                      })
                    }
                    end
                    to={`/profiles/${username}`}
                  >
                    My Articles
                  </NavLink>

where username here is a param from useParams

Expected Behavior

I'd expect even in cercumstances where a route param needs URI Encoding, NavLink should still trigger its active states.

Actual Behavior

doesn't trigger an active state if there are spaces within the route param.

[brophdawg11]

I think this is related to https://github.com/remix-run/react-router/issues/9580 - should be able to fix in https://github.com/remix-run/react-router/pull/9589

[brophdawg11]

Actually, not quite related - looks like this was always an issue since the incoming to was never encoded - but we have the proper utilities available to more easily fix this now 👍

[brophdawg11]

Fixed in #9589, should be out in a prerelease next week and a stable likely the following week 👍

[lifeiscontent]

@brophdawg11 thank you for the work, much appreciated :)

[brophdawg11]

This is now available in 6.4.4-pre.0 if you want to give it a shot!