Nested Routes
Explore how nested routes in React Router allow you to organize grouped pages under a parent route, share layouts, and create scalable navigation. Learn to use the Outlet component to dynamically render child routes within a consistent parent layout, simplifying code and improving maintainability.
We'll cover the following...
As applications become more complex and feature-rich, organizing routes in a clear and maintainable way becomes critical. Often, we’ll find that certain sections of an application are logically grouped under a parent route. A great example of this is a "Dashboard" in a web application. Dashboards typically consist of multiple related subsections, such as "Profile", "Settings", and "Notifications", which all fall under the umbrella of the main Dashboard page.
Instead of defining each of these subsections as standalone routes, nested routes allow us to organize them under a single parent route like /dashboard. This parent-child route structure is useful for applications where some pages or sections have their own sub-pages. With nested routes, we can build scalable, modular applications while maintaining a consistent user experience.
Dashboard with separate routes
Below is an example of a dashboard with separate routes for Profile, Settings, and Notifications:
In App.js: