How to Create Nested Routes in React with React Router

To create nested routes in React, use react-router-dom v6 and define child routes inside a parent route using the children property or nested <Route> components. Render nested routes with the <Outlet /> component inside the parent component to display child routes.

Syntax

Nested routes are defined by placing <Route> components inside another <Route>. The parent route renders an <Outlet /> where child routes will appear.

• <Routes>: Container for all routes.
• <Route path="parent" element={ParentComponent}>: Defines a parent route.
• <Route path="child" element={ChildComponent} />: Defines a nested child route.
• <Outlet />: Placeholder in parent to render child routes.

jsx

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

function Parent() {
  return (
    <div>
      <h2>Parent</h2>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

function Child() {
  return <h3>Child</h3>;
}

export default function App() {
  return (
    <Routes>
      <Route path="parent" element={<Parent />}>
        <Route path="child" element={<Child />} />
      </Route>
    </Routes>
  );
}

Output

When navigating to /parent, you see "Parent" heading. When navigating to /parent/child, you see "Parent" heading and below it "Child" heading.

Example

This example shows a parent route /dashboard with two nested routes: /dashboard/profile and /dashboard/settings. The <Outlet /> in Dashboard renders the nested route components.

jsx

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link> | <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h2>User Profile</h2>;
}

function Settings() {
  return <h2>Settings</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Output

At /dashboard, you see "Dashboard" heading and links. Clicking "Profile" shows "User Profile" below. Clicking "Settings" shows "Settings" below.

Common Pitfalls

Common mistakes when creating nested routes include:

• Not using <Outlet /> in the parent component, so child routes never render.
• Forgetting to wrap routes in <Routes>, which is required in React Router v6.
• Using absolute paths for nested routes instead of relative paths, causing routing errors.
• Not using <BrowserRouter> or another router at the app root.

jsx

/* Wrong: Missing <Outlet /> in parent component */
function Parent() {
  return <h2>Parent</h2>;
}

/* Right: Include <Outlet /> to render children */
function Parent() {
  return (
    <div>
      <h2>Parent</h2>
      <Outlet />
    </div>
  );
}

Quick Reference

Tips for nested routes in React Router v6:

• Always wrap routes inside <Routes>.
• Use <Outlet /> in parent components to render nested routes.
• Define nested routes as children inside parent <Route>.
• Use relative paths for nested routes (no leading slash).
• Wrap your app with <BrowserRouter> or another router.

Key Takeaways

Use <Routes> and nested <Route> components to create nested routes.

Place <Outlet /> in parent components to render child routes.

Nested route paths should be relative, without a leading slash.

Wrap your app with <BrowserRouter> to enable routing.

Avoid missing <Outlet /> to ensure nested routes display correctly.