The answer
Yes. An app layout can contain a section layout, which contains page routes, each with their own Outlet. Multi-level nesting lets you build complex, hierarchical UIs cleanly.
How to Build Nested Routes and Layouts in React Router
Can I nest routes multiple levels deep in React Router?
More FAQs in How to Build Nested Routes and Layouts in React Router
Create a layout component that renders shared UI and an Outlet, define it as the element of a parent route, and nest child routes inside that parent. The matched child renders in the Outlet.
An index route renders at the parent's path when no child route matches. Use it to show a default page, like a dashboard, when the user visits the parent URL directly without going to a specific child.
Yes. When a child route matches, React Router renders the parent layout and the child inside the Outlet. The parent stays mounted across child navigations, so its state is preserved.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.