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.


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

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:

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 segments are known as dynamic segments.

For example, can be used to generate many URLs, such as

The pattern /:userName matches URLs like the one above, where reactjs is the userName. In this case, :userName is the dynamic segment.

A path pattern is a combination of segments and dynamic segments. In general, using a path pattern client-side will request specific resources from the server-side. In our case, react-router uses the path pattern to render a specific component based on the router configuration. The following diagram shows the segments and the dynamic segments of a URL.

Get hands-on with 1200+ tech skills courses.