Infinite navigation loop - improve docs

[snowinmars]

Hi.

Main

There is a case, that causes infinite navigation loop, I think because of react optimizations. The fix is simple, but is it a good idea to add this case to docs as bad example?

Case

Do not open sandbox - it causes high CPU usage. Code from sandbox is attached below.

The issue is in react component state reinitialization. <Navigate /> causes <Redirector /> remount, but react does not reset useState values.

The fix is simple: useNavigate.
Current docs tells us to prefer useNavigate over <Navigate />, but does not tells why. Here is why.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Navigate
} from "react-router-dom";
import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const Redirector = () => {
  const [state, setState] = useState(0);
  const location = useLocation();

  console.log("initial state", state); // <-- issue

  useEffect(() => {
    console.log("create");

    if (location.pathname === "/") {
      console.log("setState 1");
      setState(1);
    }
    if (location.pathname === "/page") {
      console.log("setState 2");
      setState(2);
    }

    return () => {
      console.log("destroy");
    };
  }, [location.pathname]);

  return (
    <>
      {state === 0 && <span>loading...</span>}
      {state === 1 && <Navigate to={"/page"} />}
      {state === 2 && <span>Done</span>}
    </>
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Redirector />
  },
  {
    path: "/page",
    element: <Redirector />
  }
]);

root.render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);