fix: relative navigation from index/pathless routes (#8954)

* fix: relative navigation from index routes (#8697)

* fix: relative navigation from index routes

* fix: tests

* Handle nested pathless layout routes

* cleanups

* adjust approach to filter pathless routes

* undo reordering of deps array

Co-authored-by: Jaff Parker <[email protected]>

Author: brophdawg11

contributors.yml

@@ -23,6 +23,7 @@
 - hyesungoh
 - IbraRouisDev
 - Isammoc
+- JaffParker
 - JakubDrozd
 - janpaepke
 - jimniels

packages/react-router/__tests__/navigate-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Navigate, Routes, Route } from "react-router";
+import { MemoryRouter, Navigate, Outlet, Routes, Route } from "react-router";
 
 describe("<Navigate>", () => {
   describe("with an absolute href", () => {
@@ -45,5 +45,152 @@ describe("<Navigate>", () => {
         </h1>
       `);
     });
+
+    it("handles upward navigation from an index routes", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home">
+                <Route index element={<Navigate to="../about" />} />
+              </Route>
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          About
+        </h1>
+      `);
+    });
+
+    it("handles upward navigation from inside a pathless layout route", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route element={<Outlet />}>
+                <Route path="home" element={<Navigate to="../about" />} />
+              </Route>
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          About
+        </h1>
+      `);
+    });
+
+    it("handles upward navigation from inside multiple pathless layout routes + index route", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home"]}>
+            <Routes>
+              <Route path="home">
+                <Route element={<Outlet />}>
+                  <Route element={<Outlet />}>
+                    <Route element={<Outlet />}>
+                      <Route index element={<Navigate to="../about" />} />
+                    </Route>
+                  </Route>
+                </Route>
+              </Route>
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          About
+        </h1>
+      `);
+    });
+
+    it("handles upward navigation from inside multiple pathless layout routes + path route", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home/page"]}>
+            <Routes>
+              <Route path="home" element={<Outlet />}>
+                <Route element={<Outlet />}>
+                  <Route element={<Outlet />}>
+                    <Route element={<Outlet />}>
+                      <Route
+                        path="page"
+                        element={<Navigate to="../../about" />}
+                      />
+                    </Route>
+                  </Route>
+                </Route>
+              </Route>
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          About
+        </h1>
+      `);
+    });
+
+    it("handles parent navigation from inside multiple pathless layout routes", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/home/page"]}>
+            <Routes>
+              <Route
+                path="home"
+                element={
+                  <>
+                    <h1>Home</h1>
+                    <Outlet />
+                  </>
+                }
+              >
+                <Route element={<Outlet />}>
+                  <Route element={<Outlet />}>
+                    <Route element={<Outlet />}>
+                      <Route
+                        path="page"
+                        element={
+                          <>
+                            <h2>Page</h2>
+                            <Navigate to=".." />
+                          </>
+                        }
+                      />
+                    </Route>
+                  </Route>
+                </Route>
+              </Route>
+              <Route path="about" element={<h1>About</h1>} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.toJSON()).toMatchInlineSnapshot(`
+        <h1>
+          Home
+        </h1>
+      `);
+    });
   });
 });

packages/react-router/lib/hooks.tsx

@@ -155,8 +155,18 @@ export function useNavigate(): NavigateFunction {
   let { matches } = React.useContext(RouteContext);
   let { pathname: locationPathname } = useLocation();
 
+  // Ignore pathless matches (i.e., share the same pathname as their ancestor)
+  let pathContributingMatches = matches.filter(
+    (match, index) =>
+      index === 0 || match.pathnameBase !== matches[index - 1].pathnameBase
+  );
+
+  if (matches.length > 0 && matches[matches.length - 1].route.index) {
+    pathContributingMatches.pop();
+  }
+
   let routePathnamesJson = JSON.stringify(
-    matches.map((match) => match.pathnameBase)
+    pathContributingMatches.map((match) => match.pathnameBase)
   );
 
   let activeRef = React.useRef(false);