fix: relative navigation from index routes

contributors.yml

@@ -64,3 +64,5 @@
 - underager
 - vijaypushkin
 - vikingviolinist
+- KutnerUri
+- JaffParker

packages/react-router-dom-v5-compat/index.ts

@@ -69,7 +69,7 @@ export type {
   Pathname,
   Search,
   RoutesProps,
-} from "./react-router-dom";
+} from "../react-router-dom";
 export {
   BrowserRouter,
   HashRouter,
@@ -108,7 +108,7 @@ export {
   useResolvedPath,
   useRoutes,
   useSearchParams,
-} from "./react-router-dom";
+} from "../react-router-dom";
 
 export type { StaticRouterProps } from "./lib/components";
 export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -9,7 +9,7 @@ import { useHistory, Route as RouteV5 } from "react-router-dom";
 // We are a wrapper around react-router-dom v6, so bring it in
 // and bundle it because an app can't have two versions of
 // react-router-dom in its package.json.
-import { Router, Routes, Route } from "../react-router-dom";
+import { Router, Routes, Route } from "../../react-router-dom";
 
 // v5 isn't in TypeScript, they'll also lose the @types/react-router with this
 // but not worried about that for now.

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
 import { MemoryRouter, Navigate, Routes, Route } from "react-router";
+import { Outlet } from "../lib/components";
 
 describe("<Navigate>", () => {
   describe("with an absolute href", () => {
@@ -45,5 +46,49 @@ describe("<Navigate>", () => {
         </h1>
       `);
     });
+
+    it("skips a level from an index route", () => {
+      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("skips a level from a 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>
+      `);
+    });
   });
 });

packages/react-router/lib/hooks.tsx

@@ -158,6 +158,7 @@ export function useNavigate(): NavigateFunction {
   let routePathnamesJson = JSON.stringify(
     matches.map((match) => match.pathnameBase)
   );
+  let isPathlessRoute = !!matches[matches.length - 1]?.route.index;
 
   let activeRef = React.useRef(false);
   React.useEffect(() => {
@@ -182,7 +183,8 @@ export function useNavigate(): NavigateFunction {
       let path = resolveTo(
         to,
         JSON.parse(routePathnamesJson),
-        locationPathname
+        locationPathname,
+        isPathlessRoute
       );
 
       if (basename !== "/") {
@@ -195,7 +197,7 @@ export function useNavigate(): NavigateFunction {
         options
       );
     },
-    [basename, navigator, routePathnamesJson, locationPathname]
+    [routePathnamesJson, locationPathname, isPathlessRoute, basename, navigator]
   );
 
   return navigate;

packages/router/utils.ts

@@ -656,7 +656,8 @@ function resolvePathname(relativePath: string, fromPathname: string): string {
 export function resolveTo(
   toArg: To,
   routePathnames: string[],
-  locationPathname: string
+  locationPathname: string,
+  isPathlessRoute = false
 ): Path {
   let to = typeof toArg === "string" ? parsePath(toArg) : { ...toArg };
   let toPathname = toArg === "" || to.pathname === "" ? "/" : to.pathname;
@@ -672,7 +673,9 @@ export function resolveTo(
   if (toPathname == null) {
     from = locationPathname;
   } else {
-    let routePathnameIndex = routePathnames.length - 1;
+    let routePathnameIndex = isPathlessRoute
+      ? routePathnames.length - 2
+      : routePathnames.length - 1;
 
     if (toPathname.startsWith("..")) {
       let toSegments = toPathname.split("/");