Using store location object causes infinite renders but it's fine with rr6 location hook

[matinrco]

hey! thanks for your great work.

here is sandbox

[salvoravida]

Hi!
the problem is that Navigate has IMHO a bug here https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/components.tsx#L95. not having [] for running only once.

dispatch a new location make re-render components subscribed to, and the loop is generated because Navigate runs effects every render.

So you have 2 options

1. read the location from redux and use a NavigateFixed component
   https://codesandbox.io/s/redux-first-history-test-forked-pguxh1?file=/src/PrivateRoute.tsx

2. read location from useLocation (that has a copy stored on context) and is not subscribed to redux.

[matinrco]

So you have 2 options

1. read the location from redux and use a NavigateFixed component
   https://codesandbox.io/s/redux-first-history-test-forked-pguxh1?file=/src/PrivateRoute.tsx

2. read location from useLocation (that has a copy stored on context) and is not subscribed to redux.

I fixed that by applying a convention for myself:

• use rr stuff in components ( navigation components, hooks, etc)(obviously)
• use store router data with combination of redux-first-history actions for any out of component navigation (in slice/thunks ..)
  and don't mix this usage xd

so basically it's your second workaround 👍

[salvoravida]

@matinrco fixed here #88