Nested Routes and Outlet Component
Understand and implement nested routes in a React application.
We'll cover the following...
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 ...