0Pricing
React Academy · Lesson

Nested Routes & Outlet Layouts

Build multi-level route layouts using nested and the component.

What Are Nested Routes?

Nested routes in React Router v6 let you compose layouts: a parent route renders a shell (nav, sidebar) and child routes fill in the content area via <Outlet />.

Defining Nested Routes

Place child <Route> elements inside a parent <Route> in your router configuration. The parent path is a prefix for all children.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

All lessons in this course

  1. Nested Routes & Outlet Layouts
  2. Loaders & Actions (Data Router API)
  3. Protected Routes & Auth Guards
  4. Managing State in URL Search Params
← Back to React Academy