Layouts Revisited
React Router supports the concept of layout routes. These are routes that contain other routes and render those other routes as nested children. As you may recall, this concept was introduced in Chapter 13, Multipage Apps with React Router.
Conveniently, layout routes can also be used for sharing data across nested routes. Consider this example website:
Figure 14.2: A website with a header, a sidebar, and some main content
This website has a header with a navigation bar, a sidebar showing a list of available posts, and a main area that displays the currently selected blog post.
This example includes two layout routes that are nested into each other:
- The root layout route, which includes the top navigation bar that is shared across all pages
- A posts layout route, which includes the sidebar and the main content of its child routes (for example, the details for a selected post)
The route definitions code looks like this...
