Topic 39 of 53

Nested Routes

Q: What is the purpose of the ` ` component in React Router?

The ` ` component is used within a parent route component to indicate where a child route element should be rendered. It acts as a dynamic placeholder; when the URL matches the child route, React Router injects the child component exactly where the Outlet is placed.

Q: How do you render a default child component when the user visits the parent URL directly?

You use an **Index Route**. Inside the parent route, you add a child route with the `index` prop instead of a `path` prop: ` } />`. If the user hits `/dashboard`, the index route is rendered into the Outlet.

Overview

In complex applications, UIs are often layered. Imagine a Dashboard: the top Navbar and side Menu remain visible at all times, but the main content area swaps between 'Analytics', 'Settings', and 'Profile'.

Instead of copy-pasting the Navbar and Sidebar code into every single page component, React Router provides Nested Routes and the `<Outlet />` component.

You define a Parent Route (the Layout wrapper) and nest Child Routes inside it. When the user navigates to a child route URL, React Router renders the Parent component. The Parent component uses the <Outlet /> tag as a placeholder to declare exactly where the Child component should be injected into the layout.

Syntax

Layout Components and the Outlet

jsx

import { Routes, Route, Outlet, Link } from 'react-router-dom';

// 1. The Layout Component (Parent)
function DashboardLayout() {
  return (
    <div className="flex">
      {/* This sidebar is permanently rendered */}
      <aside className="w-64 bg-gray-900">
        <Link to="/dashboard/stats">Stats</Link>
        <Link to="/dashboard/settings">Settings</Link>
      </aside>

      <main className="flex-1 p-8">
        {/* 2. The <Outlet /> is the injection point for the child routes! */}
        <Outlet />
      </main>
    </div>
  );
}

// 3. The Router Configuration
function App() {
  return (
    <Routes>
      {/* The Parent Route */}
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* The Child Routes (URLs combine: /dashboard/stats) */}
        <Route path="stats" element={<StatsPanel />} />
        <Route path="settings" element={<SettingsPanel />} />
      </Route>
    </Routes>
  );
}

Common Pitfalls

Forgetting the Outlet: If you configure nested routes perfectly, but forget to put <Outlet /> inside the Parent Layout component, the URL will change correctly, but the screen will be completely blank where the child is supposed to appear. The parent doesn't know where to render the child!

Interview Questions

What is the purpose of the <Outlet /> component in React Router?

The <Outlet /> component is used within a parent route component to indicate where a child route element should be rendered. It acts as a dynamic placeholder; when the URL matches the child route, React Router injects the child component exactly where the Outlet is placed.

How do you render a default child component when the user visits the parent URL directly?

You use an Index Route. Inside the parent route, you add a child route with the index prop instead of a path prop: <Route index element={<DefaultDashboard />} />. If the user hits /dashboard, the index route is rendered into the Outlet.

Real-World Example

Index Routes and Layout Trees: By nesting layouts, you can ensure that the main Navbar (in RootLayout) is always present, while the Shop's specific category sidebar (in ShopLayout) only appears when the user is within the /shop domain. This is how enterprise SPAs build complex, deeply structured applications.

example

jsx

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<RootLayout />}>
        
        {/* Index route: Renders at "/" */}
        <Route index element={<HomePage />} />
        
        <Route path="shop" element={<ShopLayout />}>
          {/* Index route: Renders at "/shop" */}
          <Route index element={<ProductGrid />} />
          <Route path=":itemId" element={<ProductDetails />} />
        </Route>
        
      </Route>
    </Routes>
  );
}

Check Your Knowledge

Test your understanding of Nested Routes with these quick questions.

Which component is required inside a Parent Layout to tell React Router where to inject the Child Route's UI?

If a Parent route is `<Route path="/app">` and you want a child route to resolve to `/app/settings`, what should the child's path be?

Take React.js Quiz

Overview

Instead of copy-pasting the Navbar and Sidebar code into every single page component, React Router provides Nested Routes and the `<Outlet />` component.

Syntax

Layout Components and the Outlet

jsx

import { Routes, Route, Outlet, Link } from 'react-router-dom';

// 1. The Layout Component (Parent)
function DashboardLayout() {
  return (
    <div className="flex">
      {/* This sidebar is permanently rendered */}
      <aside className="w-64 bg-gray-900">
        <Link to="/dashboard/stats">Stats</Link>
        <Link to="/dashboard/settings">Settings</Link>
      </aside>

      <main className="flex-1 p-8">
        {/* 2. The <Outlet /> is the injection point for the child routes! */}
        <Outlet />
      </main>
    </div>
  );
}

// 3. The Router Configuration
function App() {
  return (
    <Routes>
      {/* The Parent Route */}
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* The Child Routes (URLs combine: /dashboard/stats) */}
        <Route path="stats" element={<StatsPanel />} />
        <Route path="settings" element={<SettingsPanel />} />
      </Route>
    </Routes>
  );
}

Interview Questions

What is the purpose of the <Outlet /> component in React Router?

How do you render a default child component when the user visits the parent URL directly?

Real-World Example

example

jsx

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<RootLayout />}>
        
        {/* Index route: Renders at "/" */}
        <Route index element={<HomePage />} />
        
        <Route path="shop" element={<ShopLayout />}>
          {/* Index route: Renders at "/shop" */}
          <Route index element={<ProductGrid />} />
          <Route path=":itemId" element={<ProductDetails />} />
        </Route>
        
      </Route>
    </Routes>
  );
}

Check Your Knowledge

Test your understanding of Nested Routes with these quick questions.