As an application grows, the route definitions can start to get out of hand. You’ll eventually want to start extracting routes into separate pieces. Here are some steps you can take to separate your routes.
When you first get started with react-router, you’ll probably keep all of your routes together in one place, just like it shows in the documentation. Here’s the example from the react-router README:
Move Routes Into Their Own File
As you add more routes, you might think about splitting them up. The first step you can take is to move the routes into a separate file, away from the
Router itself. Note that I’m using some ES2015 features.
The children of the router are just a prop, so we can pass them in just like any other prop in React/JSX. Here, I’ve used the
routes prop instead of
children because I find it reads better, but
routes is just an alias of
children so choose the one you like best.
Route also has a
children prop (but not the
routes alias), so you can repeat this decomposition at any layer of your routing tree.
Split Routes Into Multiple Files
After further growth in your routes, you might want to break off different sections of your routes. As I mentioned above, you can extract child routes at any level of the routing tree and pass them in as props to any
Route you have defined.
But what if you want to split some of the routes away from their siblings?
As an example, let’s split the user-related routes into their own file. We want to keep the
* routes where they are.
Here’s we’ve moved the entire
users routing tree to its own file and then “spliced” it back into its original location using a JSX child expression. When I first tried this I was surprised that it worked, but the JSX transformation does the right thing.
Once your application gets large enough, you might want to think about splitting it up into pieces and only loading the pieces that are actually needed. This includes the routes. If you have a large set of routes, you may not want or need all of them to be loaded at the same time. Fortunately, react-router supports this kind of dynamic loading of routes.
I find react-router to be an interesting library. It works for the very simple project where you only have a few routes, but can scale up to very large applications with full dynamic loading.
I’ve given you a few steps along this continuum. Choose the place that’s right for your application, and let me know if there are other patterns that I’m not aware of.