redux-first-history rr6 router: Maximum update depth exceeded error in unknown route redirect

[arnriu]

Hello,

While updating to cra5, rr6, etc... I had this bug: when reaching an unknown path, if I use rr6 Navigate component to redirect, I have a Maximum update depth exceeded error.

  <Routes>
    <Route path="path1" element={<MyElement1/>} />
    <Route path="path2" element={<MyElement2/>} />
   {/* etc... */}
    <Route path="*" element={<Navigate replace to="/home" />} />
  </Routes>

This error happens with redux-first-history rr6 router:

import { HistoryRouter as Router } from 'redux-first-history/rr6'

If I replace this router with, for instance, rr6 BrowserRouter, and keep same routes, bug is gone.

To fix it for now, I did this:

const NavigateOnce = ({ to, replace }) => {
  const navigate = useNavigate()

  useEffect(() => {
    navigate(to, { replace })
  }, [])

  return null
}

and used like this:

  <Routes>
    <Route path="path1" element={<MyElement1/>} />
    <Route path="path2" element={<MyElement2/>} />
   {/* etc... */}
    <Route path="*" element={<NavigateOnce replace to="/home" />} />
  </Routes>

[salvoravida]

Hi there, it is the same of https://github.com/salvoravida/redux-first-history/issues/80

lmk if all good

[salvoravida]

@arnriu fixed here https://github.com/salvoravida/redux-first-history/issues/88