Nested Routes and Outlet Component

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

For example, https://twitter.com/:userName/media can be used to generate many URLs, such as https://twitter.com/reactjs/media.

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.