React Router Nested Routes

What is Router Nested Routes in React?

Nested routes let a parent route render shared layout and an Outlet placeholder where its child routes appear. This models real applications, where a dashboard shell wraps many inner screens.

Router Nested Routes example

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<Overview />} />
    <Route path="applications" element={<Applications />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>

function DashboardLayout() {
  return (
    <div className="grid">
      <Sidebar />
      <main><Outlet /></main>   {/* child route renders here */}
    </div>
  );
}

How this works

Child paths are relative, so path="applications" resolves to /dashboard/applications. The index route is what shows at the parent path itself.

Key points to remember

• Outlet marks where children render; without it the child never appears.
• The layout component stays mounted while navigating between children, preserving its state.
• useOutletContext passes data from layout down to child routes.

Common mistakes with Router Nested Routes

• Writing child paths with a leading slash, which makes them absolute and breaks nesting.
• Forgetting Outlet and seeing only the layout render.