Beginning React

Nested Views

In the preceding examples, we implemented view navigation in the App component by using the Switch, Route, and Link components provided by React Router. We can use these routing components inside of any other component so that we can build nested views and nested routes.

Let's try to illustrate this with an example. Suppose that we want to add a list of winemakers to our application. We can add a new item to the navigation bar that allows us to navigate to a page showing that list.

The following screenshot shows how the new layout will appear:

So, let's change the App component's JSX markup, as follows:

import React, { Component ...