Back to React HubPractice ReactInterview React

Nearby lessons

31 of 43
React - NavigationReact - Page Not FoundReact - Nested RoutesReact - Index in Route RouterReact - Dynamic Routes in Router

🛣️ React Router – Nested Routes

📌 What are Nested Routes?

What are Nested Routes in React Router?

Nested Routes allow you to define routes inside other routes. This helps in building hierarchical navigation where child components are displayed within a parent component's layout.

Parent Component with : The Outlet component acts as a placeholder where child routes will render.

In our case, when we visit /products/shirts, the Shirts component will be displayed inside Products.

📌 What are Nested Routes?

  • Nested Routes let you render child routes inside a parent route.
  • They help create layouts where sub-pages share common UI elements (like a navbar).
  • React Router provides Outlet for rendering child routes.
  • Useful for dashboards, product categories, settings pages, etc.

⚙️ Example of Nested Routes

Below is an example where /products is the parent route, and it has child routes /products/shirts and /products/jeans.

Example03
Loading editor…

🎨 Navigation Flow

  1. Visit /products → Products page loads with links.
  2. Click Shirts → /products/shirts loads inside Products.
  3. Click Jeans → /products/jeans loads inside Products.

The parent layout (Products page) stays consistent while child content changes.

🧠 Test Your Knowledge

4 Questions
Progress: 0 / 4