How to create nested routes in React Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating nested routes in React Router enables hierarchical navigation structures with shared layouts and complex application architectures. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented nested routing extensively in dashboard applications, admin interfaces, and multi-level navigation systems. From my expertise, the most effective approach is using nested Route components with Outlet for child route rendering and shared layout components. This pattern provides organized code structure while maintaining efficient component reuse and consistent user interface layouts.
Use nested Route components with Outlet to create hierarchical navigation structures with shared layouts.
import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router-dom'
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Layout />}>
<Route index element={<Home />} />
<Route path='dashboard' element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path='users' element={<Users />} />
<Route path='settings' element={<Settings />} />
</Route>
<Route path='about' element={<About />} />
</Route>
</Routes>
</BrowserRouter>
)
}
function Layout() {
return (
<div>
<nav>
<Link to='/'>Home</Link>
<Link to='/dashboard'>Dashboard</Link>
<Link to='/about'>About</Link>
</nav>
<main>
<Outlet />
</main>
</div>
)
}
function DashboardLayout() {
return (
<div>
<h1>Dashboard</h1>
<nav>
<Link to='/dashboard'>Overview</Link>
<Link to='/dashboard/users'>Users</Link>
<Link to='/dashboard/settings'>Settings</Link>
</nav>
<div>
<Outlet />
</div>
</div>
)
}
Here nested Route components create a hierarchy where parent routes contain child routes. The Outlet component renders the matched child route content within the parent layout. The index route renders when the parent path matches exactly. This structure allows sharing headers, sidebars, and other layout elements while rendering different content based on the current route.
Best Practice Note:
This is the same approach we use in CoreUI React applications for building complex dashboard layouts, admin panels, and enterprise applications with consistent navigation structures. Use nested routes to organize related functionality together and share common layout components, reducing code duplication and improving maintainability.
