React Nested Routes

Nested routes are routes that exist inside another route.

For example:

/dashboard
/dashboard/profile
/dashboard/settings
/dashboard/orders

The last three routes can be considered child routes of the dashboard.

Nested routes help organize related pages under a common parent route.

They are useful for:

• Admin dashboards
• Student dashboards
• User profiles
• Course pages
• Shopping applications
• Settings pages

A parent route represents the main section of an application.

/dashboard

The dashboard can contain several child pages.

/dashboard/profile
/dashboard/settings

Child routes are routes placed inside a parent route.

/dashboard
    ├── profile
    ├── settings
    └── orders

Each child route can display a different component.

React Router allows child routes to be defined inside a parent Route.

<Route
    path="dashboard"
    element={<Dashboard />}
>

    <Route
        path="profile"
        element={<Profile />}
    />

</Route>

The parent component uses the Outlet component to specify where the child route should be displayed.

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

function Dashboard() {

    return (
        <div>

            <h1>Dashboard</h1>

            <Outlet />

        </div>
    );
}

Outlet is a React Router component that renders the matching child route inside its parent route.

function Dashboard() {

    return (
        <div>

            <h2>Dashboard

            <Outlet />

        </div>
    );
}

The child component appears where Outlet is placed.

Import Outlet from react-router-dom.

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

A dashboard can be used as a parent route.

<Route
    path="/dashboard"
    element={<Dashboard />}
>

    {/* Child routes */}

</Route>

The Profile page can be added as a child route.

<Route
    path="profile"
    element={<Profile />}
/>

Because it is nested inside the dashboard route, its full URL becomes:

/dashboard/profile

<Route
    path="settings"
    element={<Settings />}
/>

The complete URL becomes:

/dashboard/settings

<Route
    path="/dashboard"
    element={<Dashboard />}
>

    <Route
        path="profile"
        element={<Profile />}
    />

    <Route
        path="settings"
        element={<Settings />}
    />

    <Route
        path="orders"
        element={<Orders />}
    />

</Route>

Inside a nested route, child paths are commonly written relative to the parent route.

<Route
    path="profile"
    element={<Profile />}
/>

Together with the parent:

path="/dashboard"

the resulting URL is:

/dashboard/profile

A dashboard can have navigation links for its child pages.

import { Link } 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>
    );
}

Inside a parent route, a relative Link can point to a child route.

<Link to="profile">
    Profile
</Link>

If the current parent route is /dashboard, the link can navigate to:

/dashboard/profile

The Outlet provides the location where the selected child page will appear.

function Dashboard() {

    return (
        <div>

            <h1>Dashboard</h1>

            <Link to="profile">
                Profile
            </Link>

            {" | "}

            <Link to="settings">
                Settings
            </Link>

            <hr />

            <Outlet />

        </div>
    );
}

A child route can be configured as the default content of a parent route using an index route.

<Route
    index
    element={<DashboardHome />}
/>

This can display content when the parent route itself is visited.

<Route
    path="/dashboard"
    element={<Dashboard />}
>

    <Route
        index
        element={<DashboardHome />}
    />

    <Route
        path="profile"
        element={<Profile />}
    />

</Route>

The index route is shown at /dashboard.

A parent component can act as a shared layout for its child routes.

function DashboardLayout() {

    return (
        <div>

            <header>
                Dashboard
            </header>

            <main>
                <Outlet />
            </main>

        </div>
    );
}

Nested routes are very useful for admin panels.

/admin
/admin/students
/admin/courses
/admin/fees
/admin/settings

The Admin component can provide a common layout and navigation.

<Route
    path="/admin"
    element={<Admin />}
>

    <Route
        path="students"
        element={<Students />}
    />

    <Route
        path="courses"
        element={<Courses />}
    />

    <Route
        path="fees"
        element={<Fees />}
    />

</Route>

A course application can also use nested routes.

/courses
/courses/html
/courses/css
/courses/javascript

The Courses component can be the parent route.

Nested routes can also contain route parameters.

<Route
    path="/students/:studentId"
    element={<Student />}
>

    <Route
        path="profile"
        element={<Profile />}
    />

    <Route
        path="courses"
        element={<Courses />}
    />

</Route>

Possible URLs include:

/students/101/profile
/students/101/courses

A child component can use useParams() to access parameters from the matching route hierarchy.

import { useParams } from "react-router-dom";

function Profile() {

    const { studentId } = useParams();

    return (
        <h2>
            Student: {studentId}
        </h2>
    );
}

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>

            <hr />

            <Outlet />

        </div>
    );
}

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

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

function App() {

    return (
        <BrowserRouter>

            <Routes>

                <Route
                    path="/dashboard"
                    element={<Dashboard />}
                >

                    <Route
                        path="profile"
                        element={<Profile />}
                    />

                    <Route
                        path="settings"
                        element={<Settings />}
                    />

                </Route>

            </Routes>

        </BrowserRouter>
    );
}

export default App;

• Forgetting to use Outlet in the parent component.
• Placing child routes outside the parent route.
• Using incorrect child paths.
• Forgetting router context.
• Using incorrect relative Links.
• Forgetting to import Outlet.
• Not testing the complete nested URL.

Parent
   ↓
Outlet
   ↓
Child Route

One of the main benefits of nested routes is that a parent layout can remain visible while the child content changes.

Dashboard Header
       ↓
Dashboard Navigation
       ↓
      Outlet
       ↓
Profile / Settings / Orders

Only the child content inside the Outlet needs to change.

A typical workflow is:

1. Create Parent Route
        ↓
2. Create Parent Component
        ↓
3. Add Outlet
        ↓
4. Add Child Routes
        ↓
5. Add Child Links
        ↓
6. Test Parent URL
        ↓
7. Test Child URLs

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

function Dashboard() {

    return (
        <div>

            <h1>Student Dashboard</h1>

            <nav>

                <Link to="/dashboard">
                    Home
                </Link>

                {" | "}

                <Link to="profile">
                    Profile
                </Link>

                {" | "}

                <Link to="courses">
                    Courses
                </Link>

            </nav>

            <hr />

            <Outlet />

        </div>
    );
}

function DashboardHome() {
    return <h2>Dashboard Home</h2>;
}

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

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

function App() {

    return (
        <BrowserRouter>

            <Routes>

                <Route
                    path="/dashboard"
                    element={<Dashboard />}
                >

                    <Route
                        index
                        element={<DashboardHome />}
                    />

                    <Route
                        path="profile"
                        element={<Profile />}
                    />

                    <Route
                        path="courses"
                        element={<Courses />}
                    />

                </Route>

            </Routes>

        </BrowserRouter>
    );
}

export default App;

• Use nested routes for logically related pages.
• Use Outlet where child content should appear.
• Keep parent layouts reusable.
• Use relative paths for child routes where appropriate.
• Use relative Links for child navigation.
• Use index routes for default child content.
• Use meaningful route names.
• Keep deeply nested routes manageable.
• Test parent and child URLs carefully.
• Use route parameters when dynamic nested pages are required.

Parent Route
      ↓
   Outlet
      ↓
Child Route
      ↓
Component