Dynamic registration of additional routes - is this possible?

[joeattardi]

Hi! I'm looking to bring React Router in to my app.

The app used to be a Backbone app, but it's been mostly migrated to React. All that's left of Backbone now is the Backbone router. We match a route, and call ReactDOM.render to render the view for that route. I'd like to start planning on migrating the routing to use React Router.

However after reading the docs I'm not sure if I'm able to fit my use case. Here's what I need. My app is made up of a couple dozen feature modules (it's a big app). Depending on configuration and other factors, the feature modules are loaded with dynamic imports.

Is there a way to have a module, as it's loaded, register new routes with the React Router router? Or is it just a matter of making sure all my modules are loaded first before initializing React Router?

Any insight would be helpful - thanks!

[GabenGar]

You can lazy-load any route you want, however the router has to be aware of all routes it can operate at. You'd have to yoink routing logic out of feature modules at least.

[sergiodxa]

If you're using createBrowserRouter, you can pass your initial routes as the first argument, and then a second argument with options, there you can pass patchRoutesOnNavigation which is a function capable of registering new routes.

RR Framework mode uses this internally to implement route discovering which allows it to only send the routes used for SSR and then add the rest as the user navigates the app.