Skip to content

Refactor routing to use React Router v5 APIs

Axel Bocciarelli requested to merge refactor-routing into master

Well, this was more challenging that I thought, but I got there. The goal is to upgrade React Router from v5 to v6. The problem is that v5 was backwards-compatible with v4, and the routing in Daiquiri was still using the v4 APIs. So I followed React Router's advice and started with refactoring to the v5 APIs, starting from the deepest Route components.

I had to first replace all instances of <Route render={MyComponent}> (which injects routing information as props into MyComponent) with <Route children={<MyComponent />}>, and use hooks to access the routing information inside MyComponent (which required refactoring a few class-based components). Then, I had to refactor the custom route component PrivateRoute, pretty much as explained here, as v5 requires all routes to be direct children of a Switch.

Next up, I'd like to refactor the login redirection feature. Currently this is done via Redux, and there's a dispatch during render to clear the redirect state, which isn't great. If it's alright with you, I'd like to use the URL for this - i.e. a ?redirect query param, in order to take full advantage of React Router.

I'd also like to try to remove some of the history.push() that are performed in the Redux session provider.

After that, I'll try to upgrade to React Router v6.

Edited by Axel Bocciarelli

Merge request reports