Fix usage of Navigate in strict mode when using a data router

.changeset/navigate-strict-mode.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix usage of `<Navigate>` in strict mode when using a data router

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

@@ -485,6 +485,88 @@ describe("<Navigate>", () => {
       </div>"
     `);
   });
+
+  it("handles sync relative navigations in StrictMode using a data router", async () => {
+    const router = createMemoryRouter(
+      [
+        {
+          path: "/a",
+          children: [
+            {
+              index: true,
+              // This is a relative navigation from the current location of /a.
+              // Ensure we don't route from /a -> /a/b -> /a/b/b
+              Component: () => <Navigate to={"b"} replace />,
+            },
+            {
+              path: "b",
+              element: <h1>Page B</h1>,
+            },
+          ],
+        },
+      ],
+      { initialEntries: ["/a"] }
+    );
+
+    let { container } = render(
+      <React.StrictMode>
+        <RouterProvider router={router} />
+      </React.StrictMode>
+    );
+
+    await waitFor(() => screen.getByText("Page B"));
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <h1>
+          Page B
+        </h1>
+      </div>"
+    `);
+  });
+
+  it("handles async relative navigations in StrictMode using a data router", async () => {
+    const router = createMemoryRouter(
+      [
+        {
+          path: "/a",
+          children: [
+            {
+              index: true,
+              // This is a relative navigation from the current location of /a.
+              // Ensure we don't route from /a -> /a/b -> /a/b/b
+              Component: () => <Navigate to={"b"} replace />,
+            },
+            {
+              path: "b",
+              async loader() {
+                await new Promise((r) => setTimeout(r, 10));
+                return null;
+              },
+              element: <h1>Page B</h1>,
+            },
+          ],
+        },
+      ],
+      { initialEntries: ["/a"] }
+    );
+
+    let { container } = render(
+      <React.StrictMode>
+        <RouterProvider router={router} />
+      </React.StrictMode>
+    );
+
+    await waitFor(() => screen.getByText("Page B"));
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <h1>
+          Page B
+        </h1>
+      </div>"
+    `);
+  });
 });
 
 function getHtml(container: HTMLElement) {

packages/react-router/lib/components.tsx

@@ -16,8 +16,10 @@ import {
   createMemoryHistory,
   UNSAFE_invariant as invariant,
   parsePath,
+  resolveTo,
   stripBasename,
   UNSAFE_warning as warning,
+  UNSAFE_getPathContributingMatches as getPathContributingMatches,
 } from "@remix-run/router";
 
 import type {
@@ -34,6 +36,7 @@ import {
   DataRouterContext,
   DataRouterStateContext,
   AwaitContext,
+  RouteContext,
 } from "./context";
 import {
   useAsyncValue,
@@ -43,6 +46,7 @@ import {
   useRoutes,
   _renderMatches,
   useRoutesImpl,
+  useLocation,
 } from "./hooks";
 
 export interface RouterProviderProps {
@@ -214,18 +218,24 @@ export function Navigate({
       `only ever rendered in response to some user interaction or state change.`
   );
 
-  let dataRouterState = React.useContext(DataRouterStateContext);
+  let { matches } = React.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
   let navigate = useNavigate();
 
-  React.useEffect(() => {
-    // Avoid kicking off multiple navigations if we're in the middle of a
-    // data-router navigation, since components get re-rendered when we enter
-    // a submitting/loading state
-    if (dataRouterState && dataRouterState.navigation.state !== "idle") {
-      return;
-    }
-    navigate(to, { replace, state, relative });
-  });
+  // Resolve the path outside of the effect so that when effects run twice in
+  // StrictMode they navigate to the same place
+  let path = resolveTo(
+    to,
+    getPathContributingMatches(matches).map((match) => match.pathnameBase),
+    locationPathname,
+    relative === "path"
+  );
+  let jsonPath = JSON.stringify(path);
+
+  React.useEffect(
+    () => navigate(JSON.parse(jsonPath), { replace, state, relative }),
+    [navigate, jsonPath, relative, replace, state]
+  );
 
   return null;
 }