Nested Routes

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: