React Router SubRoute configuration example

Posted in Uncategorized

Continuing from previous example, let’s changes our “about” routes to be able to show “ContactComponent”, “CatsComponent”, and “DogsComponent”, as well as the “AboutComponent”. But we want the “AboutComponent” to handle its own “sub-routes”.

The main app should be simplified to know how to only route to “HomeComponent” or the “AboutComponent” like this …

We need to pass sub-route information to the AboutComponent like this…

where aboutRoutes is a data structure containing sub-route information of About routes. It looks like this…

Modifying our AboutComponent to receive the routes prop …

The JSON.stringify is to confirm that the AboutComponent now has the sub-route information if you render the app …

If app will not render, make sure you have the following components in place …

Next we need to generate the Route elements in AboutComponent based on the props.routes…

And then generate the links to those sub-routes …

And you get something like this…

You can pretty it up, of course.

If your sub-routes components requires props, you can change line 24 below to use “render” instead of “component”…

---