Some applications' UIs are composed of components that are nested multiple levels deep. In this case, it is very common that the segments of a URL correspond to a certain structure of nested components. For example, in our travel app, a destination might have its own dedicated page where the URL looks something like destinations slash to slash Panama. But then it has multiple subpages on it with some experiences or excursions where each experience can be accessed via a path such as destination slash to slash Panama slash Panama Canal.
But how can we go from a dedicated page for the nested page to actually showing the nested page inside of the parent page? In order to do this for the View School Travel app, the first step will be to add a router view tag so that we can load our experience details inside of the destination page. This router view tag is not our root level router view. view that's rendering the destination details page.
This router view is nested inside of that. js file, we can make the experience show route a child of the destination show route. To do this, we create a children property. And inside it, we can create the route for the experience show.
Defining a nested route is just the same as defining any other routes. Nested routes take props for a path, name, component, et cetera. Let's cut the route that we already have in place for experiences and make it a child of the destination show page. The one difference with the path here is that it's already scoped to its parent path.
So here, we don't have to specify destination, ID, slug, experience slug. We just need the experience slug. Okay, let's test it out. Now, clicking on an experience will load the experience at the bottom of the destination details.
And we can see that our route has the destination and the experience in it. Let's investigate in the dev tools and see what our new route looks like. You can see the nested route relationship pictured in the dev tools by the fact that our experience route is nested under the destination route. This is how we can tell in the dev tools what routes are child routes.
And if we had more child routes, they would also appear here. Nested routes makes conveying the relationship between certain elements of your site simple, both from the perspective of the URL path and the user interface the user interacts with.