The Outlet Component
In this page:
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.
Note: Think of Outlet as 'this is where the current page goes' inside a shared layout component.
Warning: Outlet only comes from react-router-dom's nested routing system — it has nothing to do with a component's own children prop.
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.
Note: Add an index route as a default child to avoid ever showing an empty Outlet for the parent's bare path.
Warning: An empty Outlet can look like a bug (blank content area) when really it just means no child route matched — check your route definitions.
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.
Note: This is handy for sharing data (like the current user) that every nested page needs, without duplicating a fetch in each one.
Warning: useOutletContext() only works for components rendered as a child of that specific Outlet — it won't work in unrelated components elsewhere.
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: