diff --git a/contributors.yml b/contributors.yml index bb5a3377a3..3771f073c2 100644 --- a/contributors.yml +++ b/contributors.yml @@ -9,6 +9,7 @@ - akamfoad - alany411 - alberto +- alex3d - alexlbr - AmRo045 - amsal diff --git a/packages/react-router/__tests__/navigate-test.tsx b/packages/react-router/__tests__/navigate-test.tsx index cc39aaa3cb..d75690c544 100644 --- a/packages/react-router/__tests__/navigate-test.tsx +++ b/packages/react-router/__tests__/navigate-test.tsx @@ -470,6 +470,28 @@ describe("", () => { " `); }); + + it("does not navigate twice in a row in StrictMode", () => { + let { container } = render( + + + + Page 1} /> + Page 2} /> + } /> + + + + ); + + expect(getHtml(container)).toMatchInlineSnapshot(` + "
+

+ Page 2 +

+
" + `); + }); }); function getHtml(container: HTMLElement) { diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx index efa75820be..cd2fffaa17 100644 --- a/packages/react-router/lib/components.tsx +++ b/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 }); });