The App component in the preceding example was the main component of the application. This is because it defined the root URL: /. However, once the user navigated to a specific feature URL, the App component was no longer relevant.
In versions of react-router prior to version 4, you could nest your <Route> elements so that as long as the path continued to match the current URL, the relevant component was rendered. For example, the /users/8462 path would have nested <Route> elements. In version 4 and above, react-router no longer uses nested routes to handle child content. Instead, you have your App component as you normally would. Then, <Route> elements are used to match paths against the current URL in order to render specific content in App.
Let's take a look at a parent App component that uses <Route> elements to render child components:
import React from "react";
import { BrowserRouter as Router, Route, NavLink } from...
