What does <Outlet> do?

ReactJunior~2 min read

What `<Outlet>` does

<Outlet> is an "insertion point" (placeholder) where React Router renders the content of a nested route.

If you have a parent route (for example, /dashboard) that has child routes (/dashboard/profile, /dashboard/settings), then <Outlet> is exactly what determines where inside Dashboard the child page will be displayed.

Example

javascript

import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Profile from "./Profile";
import Settings from "./Settings";

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

The Dashboard component might look like this:

javascript

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

function Dashboard() {
  return (
    <div>
      <h1>Control panel</h1>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>

      {/* The child route will be inserted here */}
      <Outlet />
    </div>
  );
}

How this works

URL	What is rendered
`/dashboard`	`<Dashboard>` (still without `<Outlet>` content)
`/dashboard/profile`	`<Dashboard>` → `<Outlet>` → `<Profile>`
`/dashboard/settings`	`<Dashboard>` → `<Outlet>` → `<Settings>`

<Outlet> = "insert the child route's content here".

Example structure

javascript

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Rendering (visually):

javascript

Dashboard
 ├── Profile  ← inserted into <Outlet>
 └── Settings ← inserted into <Outlet>

What `<Outlet>` is needed for

Task	Why `<Outlet>` is needed
Layout components	Building pages with a shared template (header, sidebar, footer)
UI reuse	A shared design for all sub-pages
Nested routes	Enabling nested navigation
Subtree isolation	Different `<Outlet>`s can be used at different nesting levels

Example of a layout with shared UI

javascript

function AppLayout() {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>
        {/* All child pages will land here */}
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

And the routes:

javascript

<Route path="/" element={<AppLayout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="contact" element={<Contact />} />
</Route>

Now:

/ → <Home /> is inserted into <Outlet />
/about → <About />
/contact → <Contact />

Header, Sidebar, and Footer stay shared across all pages.

You can use multiple levels of `<Outlet>`

javascript

<Route path="/app" element={<AppLayout />}>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route path="settings" element={<Settings />} />
  </Route>
</Route>

Visually:

javascript

<AppLayout>
  <DashboardLayout>
    <Settings />
  </DashboardLayout>
</AppLayout>

Each layout has its own <Outlet>, and each level of routes is "nested" inside the previous one.

Important to remember

<Outlet> only works inside a route that has child routes. If there are no child routes, <Outlet> renders nothing.
If you need content to show "by default" when the parent route (/dashboard) is opened, add an index route:

javascript

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

<Outlet> can be used multiple times in different layout components - it is not limited to a single level.

Summary:

<Outlet> is a special React Router component that marks the place where the child route (nested route) should be rendered.

It is needed for:

building layout components (header, sidebar, footer);
organizing nested navigation;
reusing shared UI between pages.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.