Nested Routes in React Router
Nested routes in React Router allow you to define routes inside other routes, creating a hierarchy of views that can be rendered based on the URL structure. This is especially useful for building more complex layouts where different sections of the app (like a dashboard or settings page) need to have sub-sections.
Why Use Nested Routes?
Nested routes are useful when:
For example, in a dashboard, you might have routes like:
/dashboard/analytics/dashboard/reports/dashboard/setting Instead of duplicating the layout for each section, you can define a parent route (/dashboard) that renders the common layout, while the sub-routes (analytics, reports, etc.) render different components within the same layout.
How to Implement Nested Routes
Nested routes are created by nesting
<Route> elements inside other <Route> elements or using the element prop to render child routes inside a parent component. Basic Example of Nested Routes:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<nav>
<Link to="analytics">Analytics</Link> |
<Link to="reports">Reports</Link>
</nav>
{/* This is where nested routes will be rendered */}
<Routes>
<Route path="analytics" element={<Analytics />} />
<Route path="reports" element={<Reports />} />
</Routes>
</div>
);
}
function Analytics() {
return <h3>Analytics Page</h3>;
}
function Reports() {
return <h3>Reports Page</h3>;
}
function App() {
return (
<Router>
<Routes>
<Route path="dashboard/*" element={<Dashboard />} />
</Routes>
</Router>
);
}
export default App;
Key Points:
/dashboard, and within it, there are nested routes /dashboard/analytics and /dashboard/reports.Dashboard), so the common layout (like the heading and nav links) remains while the content changes based on the routeHow Nested Routes Work:
/dashboard) defines the base path. It renders the layout for the dashboard, including shared components like navigation or headers./dashboard/analytics and /dashboard/reports. These will be rendered as part of the parent's layout, based on the URL./dashboard/analytics.
Dynamic Nested Routes
In some cases, nested routes might also include dynamic URL segments, allowing you to pass data as part of the URL. For example, a blog application might have a route for individual posts under a parent route:
Example of Dynamic Nested Routes:
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
function Blog() {
return (
<div>
<h2>Blog</h2>
<nav>
<Link to="post/1">Post 1</Link> |
<Link to="post/2">Post 2</Link>
</nav>
<Routes>
<Route path="post/:postId" element={<Post />} />
</Routes>
</div>
);
}
function Post() {
const { postId } = useParams();
return <h3>Post ID: {postId}</h3>;
}
function App() {
return (
<Router>
<Routes>
<Route path="blog/*" element={<Blog />} />
</Routes>
</Router>
);
}
export default App;
Key Points:
:postId in the route is a dynamic segment. It can change based on the URL (e.g., /blog/post/1 or /blog/post/2).Post component.
Conclusion
Nested routes in React Router help structure your application more effectively by allowing routes to be hierarchical. They enable you to maintain shared layouts (like headers, footers, or navigation) while still updating only parts of the UI based on the URL. With nested routing, complex applications can be built in a modular, scalable, and maintainable way, offering a better user experience without unnecessary re-renders or layout duplications.