Nested RoutesEdit this page
Nested routes are a way to create a hierarchy of routes in your application. This is useful for creating a layout that is consistent across multiple pages, or for creating a relationship between pages that are related to each other.
In Solid Router, the following two route definitions have the same result:
<User /> component will render when the URL is
/users/:id in both cases.
The difference is that in the first case,
/users/:id is the only route, and in the second case,
/users/ is also a route.
Leaf nodes, or innermost
Route components, are the only ones that become their own route.
If a parent
Route component needs to be its own route, it must be specified separately:
Nesting can be done through the use of
props.children passed to the route component.
This is useful for creating a layout that is consistent across multiple pages, or for creating a relationship between pages that are related to each other:
While the routes are still configured the same, the route elements will appear inside the parent element where the
props.children was declared.
While routes can be nested indefinitely, it is important to note that only leaf nodes will become their own routes.
For example, this means that if you have a route that is nested 3 levels deep, only the innermost route will become its own route.
The only route created is
/layer1/layer2, and it appears as three nested divs.