Nested routes and layouts

Most real apps have shared chrome around every page: a nav bar, a sidebar, a footer. You do not want to repeat that chrome in every component. React Router nested routes let you wrap a group of pages in a single layout component.

App.tsx

tsx

import { Outlet } from 'react-router-dom';

function MainLayout() {
  return (
    <div>
      <nav className="border-b p-4">My Bookstore</nav>
      <main className="p-6"><Outlet /></main>
      <footer className="border-t p-4">Built with love</footer>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route element={<MainLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="/books/:id" element={<BookDetail />} />
      </Route>
    </Routes>
  );
}

A layout component renders the chrome and an Outlet for the matched child route.

The Outlet component is the slot where child routes render. The layout wraps it with whatever chrome you want. When you navigate from / to /books/5, the layout stays mounted and only the Outlet re-renders with the new page. That is the efficient re-render path.

Quiz: Quiz

Loading practice…