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.

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

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from './Home.jsx'
import About from './About.jsx'
import Contact from './Contact.jsx'
import Navbar from './Navbar.jsx'
import PageNotFound from './PageNotFound.jsx'
import Products from './Products.jsx'
import Shirts from './Shirts.jsx'
import Jeans from './Jeans.jsx'

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/products' element={<Products />}>
          <Route path='shirts' element={<Shirts />} />
          <Route path='jeans' element={<Jeans />} />
        </Route>
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='*' element={<PageNotFound />} />
      </Routes>
    </>
  )
}

export default App;

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.