...

/

Nested Routes and Outlet Component

Nested Routes and Outlet Component

Understand and implement nested routes in a React application.

Before we can tackle nested routes, we need to understand the path pattern of the URL. By the end of this lesson, we’ll know enough to implement nested routes in our application.

Path pattern

Understanding the URL path pattern is essential before learning about the nested routes.

Segment

When we write URLs, they contain patterns. Consider this Twitter URL:

https://twitter.com/reactjs

After / (forward slash), there’s a username (reactjs). This URL leads to reactjs’s profile section. Anything between pairs of / is called a segment. Consider the following URL:

https://twitter.com/reactjs/media

In this case, reactjs and media are each segment of the URL.

Dynamic segment

Sometimes we want react-router to match URLs with placeholders for variable values. In such cases, we use placeholders in specific segments. Such ...