You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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 👍
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
butNavLink
doesn't trigger an active state when it should. e.g:where
username
here is a param fromuseParams
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.
The text was updated successfully, but these errors were encountered: