When will you use this?

Add routing when your app has more than one screen and URLs should be bookmarkable.

• Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
• E-commerce sites route /product/123 to a product detail component.

Real-world: Zoho settings layout

Zoho admin keeps sidebar visible while /settings/profile and /settings/billing swap inner content — nested routes render inside a layout Outlet.

Production-style code

function SettingsLayout() {
  return (
    <div className="settings-shell">
      <SettingsNav />
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

<Routes>
  <Route path="/settings" element={<SettingsLayout />}>
    <Route index element={<GeneralSettings />} />
    <Route path="profile" element={<ProfileSettings />} />
    <Route path="billing" element={<BillingSettings />} />
  </Route>
</Routes>

What happens in production: Users never lose navigation context when switching settings tabs — standard pattern in Gmail, GitHub, and SaaS admin panels.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

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

function DashboardLayout() {
  return (
    <div>
      <aside>Menu</aside>
      <main><Outlet /></main>
    </div>
  );
}

// In Routes:
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

Line-by-line walkthrough

How it works (big picture)

• DashboardLayout wraps all /dashboard/* pages.
• Outlet is the placeholder for Settings or Profile.
• Paths are relative: settings not /dashboard/settings inside the nested Route.

Do this on your computer

1. Create a layout component with .
2. Nest Route elements inside the parent Route.
3. Visit /dashboard/settings and confirm only the outlet area changes.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Nested Routing and inspect component props/state.

Remember

Parent Route + layout + Outlet = nested routing. Child routes render inside Outlet. Good for admin panels and dashboards.

Common questions