Nested routing allows you to create UI that shares common layouts while specific segments of the page change based on the URL.
Interactive Simulation Engine
Nested Route Structure
Click nodes to inspect
Executable Code Workbench
page.tsx
Live Code Editor1// app/dashboard/layout.tsx
2export default function DashboardLayout({ children }) {
3 return (
4 <div>
5 <Sidebar />
6 <main>{children}</main>
7 </div>
8 )
9}
10
11// app/dashboard/settings/page.tsx
12// Renders inside the DashboardLayout children propMental Model
Imagine a set of Russian nesting dolls. Each layout 'wraps' the child below it, preserving state and UI as you navigate deeper.
Why This Exists
To avoid re-rendering common UI (like navbars) during navigation and to build complex dashboards where only parts of the screen update.
Critical Note
"When navigating between /dashboard/settings and /dashboard/analytics, the DashboardLayout stays mounted and does not re-render. Only the children change."