React Router – Index Route | React Tutorial

📌 What is Index Route?

What is an Index Route in React Router?

An Index Route is a child route without a path. It renders as the default content inside its parent route. When users visit the parent route, the index route is automatically displayed.

📌 Key Points about Index Routes

An index route is defined with index instead of a path.
It acts like the default child route for its parent.
When no specific sub-route is matched, the index route will render.
Useful for showing default content inside nested routes.

⚙️ Example of Index Route

In the following example, /products is the parent route. The index route will render Shirts as the default content when visiting /products.

React Playground

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/>}>
          {/* ✅ Index route as default child */}
          <Route index element={<Shirts/>}/>
          <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;

Open Sandbox

🧩 How Index Route Works

Visiting /products will show the Shirts component by default because it is defined as the index route.

/products → Shows Shirts
/products/shirts → Shows Shirts
/products/jeans → Shows Jeans

react

Nearby lessons

🛣️ React Router – Index Route

📌 What is Index Route?

What is an Index Route in React Router?

📌 Key Points about Index Routes

⚙️ Example of Index Route

🧩 How Index Route Works

🧠 Test Your Knowledge

react

Nearby lessons

🛣️ React Router – Index Route

📌 What is Index Route?

What is an Index Route in React Router?

📌 Key Points about Index Routes

⚙️ Example of Index Route

🧩 How Index Route Works

🧠 Test Your Knowledge

1📝 What is an Index Route in React Router?

2📌 Why do we use Index Routes?

3🔄 If you visit '/products', which component renders in the example?

4🎨 How do you define an Index Route in React Router?