Using nested routes
In this section, we will cover nested routes and the situations in which they are useful, before using a nested route in our app. The nested route will also resolve the disappearing app header problem we experienced in the previous sections.
Understanding nested routes
A nested route allows a segment of a route to render a component. For example, the following mock-up is commonly implemented using nested routes:
Figure 6.6 – Use case for nested routes
The mock-up displays information about a customer. The path determines the active tab – in the mockup, Profile is the active tab because that is the last segment in the path. If the user selects the History tab, the path would change to /customers/1234/history.
A Customer component could render the shell of this screen, including the customer’s name, picture, and tab headings. The component that renders the tab contents could be decoupled from the Customer...