[Bug]: <Navigate> can be canceled by navigate("?x") even if guarded by if(navigation.state === "idle")

[jtbandes]

What version of React Router are you using?

6.15.0

Steps to Reproduce

Call if (navigation.state === "idle") { navigate("?searchparams"); } in a useEffect while a <Navigate to="/foo" /> is being executed.

See demo: https://stackblitz.com/edit/github-ymgiss?file=src%2Fapp.tsx

Expected Behavior

If navigation.state === "idle", then navigate() should not interfere with <Navigate />.

Actual Behavior

navigation.state === "idle" but a <Navigate /> is actually in progress. The in-progress navigation is canceled, leaving the page in an incorrect state where the route that used <Navigate /> is visible.

(The text "navigating..." should never be visible because it's in a component that uses <Navigate />)

Note: if navigate("/bar") is used instead of navigate("?abc"), the problem does not occur.

[timdorr]

At the time of rendering, the navigation state is indeed in an idle state. There is no loader on the routes, so the state goes to idle immediately. If you add a dummy loader, you'll see it get into an infinite rendering loop, as this effect doesn't have an end state (it will navigate once every loading completes).