Evaluate connected-react-router

[carlgieringer]

connected-react-router appears to be incompatible with history. history.parsePath returns a Location while @types/connected-react-router require a RouterLocation with a query field.

There appear to be ignored issues in the repo:

• Support react router 6 supasate/connected-react-router#543
• Property 'query' does not exist on type 'Location<unknown> supasate/connected-react-router#472

One alternative seems to be to replace connected-react-router with redux-first-history: https://github.com/salvoravida/redux-first-history.

[carlgieringer]

Another possibility would be to use react-router with <Navigate> and useNavigate. But I'm unclear how to dispatch navigation from within redux-saga.

I'm a little concerned that react-router hasn't taken support for async routing seriously. This appears in their (old?) docs on v5:

Sometimes you might also need to navigate programmatically, after some asynchronous task that was originally initiated by an action. For example, you might dispatch an action when the user submits a login form. Your thunk, saga or other async handler then authenticates the credentials, then it needs to somehow navigate to a new page if successful. The solution here is simply to include the history object (provided to all route components) in the payload of the action, and your async handler can use this to navigate when appropriate.

https://v5.reactrouter.com/web/guides/deep-redux-integration

But including history in an action payload would probably violate Redux's rule to have serializable actions.

This SO has several options, including the unstable_HistoryRouter and a custom HistoryRouter component.

[carlgieringer]

Howdju's use cases appear to be (search for connected-react-router):

• Update the redux store in response to a navigation. E.g., remove the redirectLocation after the user has navigated or clear the search text when the user navigates. Or clear the page if the user changes location and we will need to refetch the page data (tagPageSlice.)
• dispatch goBack from components where the user can 'cancel' their interaction. E.g. if the user is at the registration page and cancels, we goBack.
• Send a page view from a saga that observes location changes.
• Redirect to login for paths requiring authentication. We should replace this with an HOC withAuth that checks the auth and redirects. That way we colocate a component's auth requirements with the component rather than in flowSagas.js.
• Redirect home for missing justification root targets. We should probably just stay on the page and tell the user "missing". Or we could redirect from the page.
• Redirecting after login
• Navigating to entities after creating them (goto.proposition etc.).