fix(react-router): remove double navigation of Navigation component in StrictMode

contributors.yml

@@ -9,6 +9,7 @@
 - akamfoad
 - alany411
 - alberto
+- alex3d
 - alexlbr
 - AmRo045
 - amsal

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

@@ -470,6 +470,28 @@ describe("<Navigate>", () => {
       </div>"
     `);
   });
+
+  it("does not navigate twice in a row in StrictMode", () => {
+    let { container } = render(
+      <React.StrictMode>
+        <MemoryRouter initialEntries={["/page1", "/page2", "/navigate"]}>
+          <Routes>
+            <Route path="page1" element={<h1>Page 1</h1>} />
+            <Route path="page2" element={<h1>Page 2</h1>} />
+            <Route path="navigate" element={<Navigate to={-1} />} />
+          </Routes>
+        </MemoryRouter>
+      </React.StrictMode>
+    );
+
+    expect(getHtml(container)).toMatchInlineSnapshot(`
+      "<div>
+        <h1>
+          Page 2
+        </h1>
+      </div>"
+    `);
+  });
 });
 
 function getHtml(container: HTMLElement) {

packages/react-router/lib/components.tsx

@@ -209,6 +209,7 @@ export function Navigate({
 
   let dataRouterState = React.useContext(DataRouterStateContext);
   let navigate = useNavigate();
+  let navigateCalledRef = React.useRef(false);
 
   React.useEffect(() => {
     // Avoid kicking off multiple navigations if we're in the middle of a
@@ -217,6 +218,10 @@ export function Navigate({
     if (dataRouterState && dataRouterState.navigation.state !== "idle") {
       return;
     }
+    if (navigateCalledRef.current) {
+      return;
+    }
+    navigateCalledRef.current = true;
     navigate(to, { replace, state, relative });
   });