The Outlet Component
In this page:
function ParentLayout() {
return (
<div>
<header>Shared layout</header>
<Outlet context={sharedValue} />
</div>
);
}What Outlet Actually Does
Outlet is a special component that acts as a placeholder inside a parent route's rendered output. At the point where <Outlet /> appears in JSX, React Router substitutes in whichever child route element currently matches the rest of the URL.
Example: What Outlet Actually Does
// Run in your local React project (npm install required)
import { Outlet, Routes, Route } from 'react-router-dom';
function Layout() {
return <div><header>Site Header</header><Outlet /></div>;
}
function Page() { return <p>A page inside the layout</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route path="page" element={<Page />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Outlet Renders Nothing Without a Matching Child
If the current URL matches the parent route but no child route inside it matches (for example, visiting exactly /dashboard when only /dashboard/settings is defined as a child), the Outlet renders nothing at all — the surrounding layout still shows, just with an empty content area.
Example: Outlet Renders Nothing Without a Matching Child
// Run in your local React project (npm install required)
import { Outlet, Routes, Route } from 'react-router-dom';
function Layout() { return <div><nav>Nav</nav><Outlet /></div>; }
function Home() { return <p>Default home content</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Passing Data to Outlet with context
Outlet accepts an optional context prop, letting a parent layout pass data down to whichever child route currently renders. The child reads it back using the useOutletContext() hook, avoiding the need for React Context set up separately just for this.
Example: Passing Data to Outlet with context
// Run in your local React project (npm install required)
import { Outlet, useOutletContext } from 'react-router-dom';
function Layout() {
return <Outlet context={{ user: "Asha" }} />;
}
function Child() {
const { user } = useOutletContext();
return <p>Hello, {user}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Confusing Outlet with children — Outlet is specifically for nested ROUTES, not for regular component composition.
- Forgetting Outlet only renders something when there's an actually-matching child route for the current URL.
- Placing multiple <Outlet /> instances in one layout expecting different content in each — only one Outlet renders the matched child.
- Outlet is a component from react-router-dom used inside a parent route's element.
- It renders whatever child route currently matches the URL, in place.
- If no child route matches, Outlet renders nothing.
- It's the mechanism that makes nested routing and shared layouts possible.
Requires npm install react-router-dom — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: