Nearby lessons
32 of 43🛣️ React Router – Index Route
📌 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
indexinstead of apath. - 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.
Example03
Loading editor…
🧩 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
🧠 Test Your Knowledge
4 QuestionsProgress: 0 / 4