Nested Routes
In complex applications, you often have layouts that are shared across multiple pages for example, a sidebar that remains visible while the main content changes based on a sub-route. React Router's **nested routes** allow you to compose routes inside other routes, making it easy to create these layouts.
What are Nested Routes?
Nested routes are routes that are rendered inside parent routes. They share the same URL prefix and often share UI components like headers, sidebars, or tabs. The parent component renders an `` where the child route components will appear.
Think of nested routes like folders inside folders. The URL `/dashboard/settings` might have a Dashboard layout with a sidebar, and the Settings component appears in the main area.
Setting Up Nested Routes
In React Router v6, you define nested routes by placing `Route` components inside another `Route`. The parent route's element should contain an `` component where child routes will be rendered.
<!-- App.js -->import { BrowserRouter, Routes, Route } from 'react-router-dom';import DashboardLayout from './DashboardLayout';import DashboardHome from './DashboardHome';import DashboardSettings from './DashboardSettings';import DashboardProfile from './DashboardProfile';
function App() { return ( <BrowserRouter> <Routes> <Route path="/dashboard" element={<DashboardLayout />}> <Route index element={<DashboardHome />} /> <!-- default child --> <Route path="profile" element={<DashboardProfile />} /> <Route path="settings" element={<DashboardSettings />} /> </Route> </Routes> </BrowserRouter> );}
<!-- DashboardLayout.js -->import { Outlet, NavLink } from 'react-router-dom';
function DashboardLayout() { return ( <div style={{ display: 'flex' }}> <nav style={{ width: 200, background: '#f0f0f0' }}> <NavLink to="/dashboard" end>Home</NavLink> <NavLink to="/dashboard/profile">Profile</NavLink> <NavLink to="/dashboard/settings">Settings</NavLink> </nav> <main style={{ flex: 1, padding: '20px' }}> <Outlet /> <!-- Child routes render here --> </main> </div> );}Index Routes
An index route is the default child route that renders when the parent URL matches exactly (e.g., `/dashboard`). It uses the `index` prop instead of a `path`.
<Route path="/dashboard" element={<DashboardLayout />}> <Route index element={<DashboardHome />} /> <!-- renders at /dashboard --> <Route path="profile" element={<DashboardProfile />} /></Route>Relative Links in Nested Routes
When inside a nested route, you can use relative paths in `Link` and `NavLink`. For example, from within a component rendered at `/dashboard/settings`, a link to `"profile"` will go to `/dashboard/profile`.
function Settings() { return ( <div> <h2>Settings</h2> <Link to="profile">Go to Profile</Link> <!-- relative link --> </div> );}Two Minute Drill
- Nested routes allow you to compose routes inside parent routes, sharing common layouts.
- The parent component renders an `
` where child routes appear.
- Define nested routes by placing `Route` components inside a parent `Route`.
- Use `index` routes for default content when the parent path matches exactly.
- Links inside nested routes can be relative to the current route.
Need more clarification?
Drop us an email at career@quipoinfotech.com