From 35ff0250bfa8e3a7d88a6a3bfc5da088bc98b51e Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Mon, 17 Oct 2022 10:26:44 -0400
Subject: [PATCH] fix: respect relative prop in NavLink for isActive (#9453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Mikaël ANZANO <m.anzano@meetic-corp.com>

* fix: add unit test for NavLink relative=path

* add changeset

Co-authored-by: Mikaël Anzano <mikael.anzano@gmail.com>
Co-authored-by: Mikaël ANZANO <m.anzano@meetic-corp.com>
---
 .changeset/fluffy-buttons-push.md             |  5 ++++
 contributors.yml                              |  1 +
 .../__tests__/nav-link-active-test.tsx        | 27 +++++++++++++++++++
 packages/react-router-dom/index.tsx           |  2 +-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fluffy-buttons-push.md

diff --git a/.changeset/fluffy-buttons-push.md b/.changeset/fluffy-buttons-push.md
new file mode 100644
index 0000000000..38efa8a730
--- /dev/null
+++ b/.changeset/fluffy-buttons-push.md
@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Respect relative=path prop on NavLink
diff --git a/contributors.yml b/contributors.yml
index 157443a895..bb2cdeef48 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -73,6 +73,7 @@
 - loun4
 - lqze
 - lukerSpringTree
+- manzano78
 - marc2332
 - markivancho
 - marvinruder
diff --git a/packages/react-router-dom/__tests__/nav-link-active-test.tsx b/packages/react-router-dom/__tests__/nav-link-active-test.tsx
index 34851b7d9d..8b9da3c449 100644
--- a/packages/react-router-dom/__tests__/nav-link-active-test.tsx
+++ b/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", () => {
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index c782becb5a..9c1e46fda3 100644
--- a/packages/react-router-dom/index.tsx
+++ b/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);