Learn React with TypeScript 3

Nested routes

A nested route is when a URL is more than one level deep and it renders multiple components. We are going to implement some nested routes in this section in our Admin page. Our completed Admin page will look like the following screenshot:

The URL in the preceding screenshot is 3 levels deep which renders the following:

• The top-level menu containing links for Users and Products.
• A menu containing all the users. This is just Fred, Bob, and Jane is our example.
• Information about the selected user.

1. Let's start by opening AdminPage.tsx and add import statements for the following from react-router-dom:

import { NavLink, Route, ...