add a way to cancel pending navigation

[layerok]

Proposed API

const navigate = useNavigate();
useEffect(() => {
  const abortController = new AbortController();
  navigate({
    search: "?page=1"
  }, { signal: abortController.signal });
  return () => abortController.abort();
}, [navigate])

Context

Navigation started in useEffect will be completed in a microtask when loaders resolve. If an error is thrown before the navigation was completed, it will result in an infinite loop unless we cancel this microtask.

It makes sense because when you are doing this

useEffect(() => {
  router.navigate(...);
}, [])

You are essentially doing this

useEffect(() => {
  // starts navigation
  updateState();
  // router resolves loaders
  Promise.resolve().then(() => {
    // completes navigation in a microtask
    updateState();
  })
}, [])

Currently I were able to workaround the infinite loop like this

useEffect(() => {
  const timeout = setTimeout(() => {
    navigate({
      search: "?page=2"
    })
  })
  return () => {
    clearTimeout(timeout)
  }
}, [navigate]);

Infinite loop bug reproduction - https://codesandbox.io/p/github/layerok/infinite-loop-react-router/main
Don't worry, your browser won't crush, I've added a check to stop the infinite loop

To get more context, you can read this issue mui/mui-x#13230
I don't want to duplicate all details here.