[Bug]: NavLink is never active when using relative="path"

[manzano78]

What version of React Router are you using?

6.4.2

Steps to Reproduce

1. Create a data router with one route configured with this path: /contact/:id
2. In that route's element, render a relative="path" NavLink:
   <NavLink relative="path" to="../1" className={({ isActive }) => isActive ? "active" : undefined} >Michael</NavLink>
3. In your browser, go to the following URL: /contact/1

Expected Behavior

The generated DOM element should contain the active class: <a href="/contact/1" class="active">Michael</a>

Actual Behavior

The generated DOM element has the right href but doesn't contain the active class: <a href="/contact/1">Michael</a>, so the expected styles aren't applied.

[kiliman]

Looks like <NavLink> was not updated to handle <Link relative/>

react-router/packages/react-router-dom/index.tsx

Line 430 in d9d233c

export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(

[brophdawg11]

Merged the fix for this - should be released in a 6.4.3 hopefully later this week 👍

[brophdawg11]

👋 Just did a prerelease (6.4.3-pre.0) which should fix this if you want to give it a shot!