Defining Routes, Route Layouts, and Outlets0%
Defining Routes, Route Layouts, and Outlets
Beginner12 min read•Updated: Jul 11, 2026
Defining Routes, Route Layouts, and Outlets
1. Nested Routing and Shared Layouts
Real-world web applications share consistent structural layouts across multiple pages:
- A shared top navigation bar and global footer.
- A dashboard sidebar with sub-navigation links.
- Consistent breadcrumb trails.
Instead of duplicating the <Navbar /> and <Sidebar /> inside every individual page component, modern routing employs Nested Routes and Shared Layouts.
Output
Application Layout (Navbar & Footer)
│
┌─────────────────────┴─────────────────────┐
▼ ▼
Home Route Dashboard Layout (Sidebar)
(/) │
┌──────────┴──────────┐
▼ ▼
Analytics Page Settings Page
(/dashboard/analytics) (/dashboard/settings)
2. The <Outlet> Component
In React Router, <Outlet> acts as a placeholder or dynamic portal inside a parent layout component.
When a child route matches the active URL, React Router renders that child component directly inside the parent layout's <Outlet />:
JSX
// src/layouts/RootLayout.jsx
import React from 'react';
import { Outlet, NavLink } from 'react-router-dom';
export default function RootLayout() {
return (
<div className="site-wrapper">
{/* Shared Header across all pages */}
<header className="global-header">
<h1 className="logo">MSK Institute</h1>
<nav className="nav-links">
<NavLink to="/">Home</NavLink>
<NavLink to="/courses">Courses</NavLink>
<NavLink to="/dashboard">Dashboard</NavLink>
</nav>
</header>
{/* Dynamic Slot: Child routes render here! */}
<main className="page-content">
<Outlet />
</main>
{/* Shared Footer across all pages */}
<footer className="global-footer">
<p>© 2026 MSK Institute of Technology. All rights reserved.</p>
</footer>
</div>
);
}
3. Nesting Routes in the Route Configuration
In your route definitions, nest child <Route> elements inside parent layout <Route> tags:
JSX
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import RootLayout from './layouts/RootLayout';
import DashboardLayout from './layouts/DashboardLayout';
import HomePage from './pages/HomePage';
import CoursesPage from './pages/CoursesPage';
import AnalyticsPage from './pages/AnalyticsPage';
import SettingsPage from './pages/SettingsPage';
import NotFoundPage from './pages/NotFoundPage';
export default function App() {
return (
<BrowserRouter>
<Routes>
{/* Parent Root Layout */}
<Route path="/" element={<RootLayout />}>
{/* Index Route: renders when URL matches exact parent path "/" */}
<Route index element={<HomePage />} />
<Route path="courses" element={<CoursesPage />} />
{/* Nested Sub-Layout: /dashboard */}
<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<AnalyticsPage />} />
<Route path="analytics" element={<AnalyticsPage />} />
<Route path="settings" element={<SettingsPage />} />
</Route>
{/* 404 Catch-All Route */}
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
4. Index Routes and 404 Catch-Alls
- Index Routes (
<Route index element={<Home />} />): An index route renders in the parent layout's<Outlet />when the user is at the exact parent URL path (/or/dashboard), without appending extra route segments. - *Catch-All 404 Routes (`<Route path="" element={<NotFound />} />
):** The asterisk wildcard*` matches any URL that failed to match any defined route, displaying a user-friendly 404 page.
Interactive Quiz
Practice Quiz
Question 1
What is the primary role of the
<Outlet> component in React Router?Question 2
How do you define a 404 "Page Not Found" route in React Router v6?
Question 3
What is an "Index Route" (
<Route index element={<Home />} />)?Question 4
What is the primary architectural benefit of nested routing with shared layouts?
Question 5
If a child route path is defined as
path="analytics" inside a parent with path="dashboard", what full URL matches it?Next Lesson
Dynamic URL Parameters with useParams
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Client-Side Routing Architecture with React Router | Dynamic URL Parameters with useParams |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.