fix: respect relative prop in NavLink for isActive (#9453)

* fix: respect relative prop in NavLink for isActive (#9451)

Co-authored-by: Mikaël ANZANO <[email protected]>

* fix: add unit test for NavLink relative=path

* add changeset

Co-authored-by: Mikaël Anzano <[email protected]>
Co-authored-by: Mikaël ANZANO <[email protected]>

Author: brophdawg11

.changeset/fluffy-buttons-push.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Respect relative=path prop on NavLink

contributors.yml

@@ -73,6 +73,7 @@
 - loun4
 - lqze
 - lukerSpringTree
+- manzano78
 - marc2332
 - markivancho
 - marvinruder

packages/react-router-dom/__tests__/nav-link-active-test.tsx

@@ -394,6 +394,33 @@ describe("NavLink", () => {
       });
     });
   });
+
+  describe("when it matches with relative=path links", () => {
+    it("applies the default 'active' className to the underlying <a>", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/contacts/1"]}>
+            <Routes>
+              <Route
+                path="contacts/:id"
+                element={
+                  <NavLink to="../1" relative="path">
+                    Link
+                  </NavLink>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let anchor = renderer.root.findByType("a");
+
+      expect(anchor.props.href).toEqual("/contacts/1");
+      expect(anchor.props.className).toEqual("active");
+    });
+  });
 });
 
 describe("NavLink using a data router", () => {

packages/react-router-dom/index.tsx

@@ -441,7 +441,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
     },
     ref
   ) {
-    let path = useResolvedPath(to);
+    let path = useResolvedPath(to, { relative: rest.relative });
     let match = useMatch({ path: path.pathname, end, caseSensitive });
 
     let routerState = React.useContext(DataRouterStateContext);