Understanding the Index Route in React Router: Why It’s Essential for Clean Navigation

The index route refers to the default route that is rendered when a user navigates to the parent route but doesn't specify a more specific path.

Example

<Routes>
  <Route path="university" element={<University />}>
    <Route path="alumni" element={<Alumni />} />
    <Route index element={<About />} />
    <Route path="news" element={<News />} />
  </Route>
</Routes>;

<Route index element={<About />} />

When users visit /university (without any additional path), the <About /> component will be rendered by default.

 

Follow below step-by-step procedure to build the complete working application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘index-route-demo’.

 

Project structure looks like below.

 

Step 2: Navigate to the project directory and install react router dom by executing below commands.

 

cd index-route-demo
npm install react-router-dom

Step 3: Create pages folder and define University, About, Alumni and News pages.

 

University.jsx

import { Outlet, Link } from "react-router-dom";
import "../styles.css";

export default function University() {
  return (
    <>
      <nav className="menu">
        <ul>
          <li>
            <Link to="/university">About</Link>
          </li>
          <li>
            <Link to="/university/alumni">Alumni</Link>
          </li>
          <li>
            <Link to="/university/news">News</Link>
          </li>
        </ul>
      </nav>

      <h1>ABC Autonomous University</h1>
      <p>
        Welcome to ABC University, a place where tradition meets innovation.
        Since our founding in 1901, we have been committed to academic
        excellence, fostering a diverse and inclusive community, and preparing
        students to lead and make a difference in the world.
      </p>

      <Outlet />
    </>
  );
}

About.jsx

export default function About() {
  return (
    <>
      <h1>About us</h1>
      <p>
        Welcome to ABC University, where we believe in the power of education to
        transform lives and communities. Established in 1901, ABC University has
        grown to become a leading institution known for its commitment to
        academic excellence, innovation, and inclusivity.
      </p>
    </>
  );
}

Alumni.jsx

export default function Alumni() {
  return (
    <>
      <h1>Alumni</h1>
      <p>
        The ABC University Alumni Network is a vibrant community of over 100,000
        graduates who are making waves across various industries worldwide. Our
        alumni are leaders, innovators, and change-makers who continue to
        contribute to society in impactful ways.
      </p>
    </>
  );
}

News.jsx

export default function News() {
  return (
    <>
      <h1>Recent News Highlights</h1>
      <ul>
        <li>
          <h3>ABC University Launches Sustainability Initiative</h3>
          <p>
            ABC University has unveiled a new campus-wide sustainability program
            aimed at reducing the university’s carbon footprint by 50% over the
            next decade. As part of this initiative, solar panels have been
            installed across campus, and new eco-friendly policies have been
            implemented.
          </p>
        </li>
        <li>
          {" "}
          <h3>ABC Students Win National Innovation Award</h3>
          <p>
            A team of engineering students from ABC University recently won
            first place at the National Innovation Challenge for their
            cutting-edge technology designed to improve water purification in
            developing countries.
          </p>
        </li>
      </ul>
    </>
  );
}

Step 4: Create styles.css in src folder.

 

styles.css

/* Menu container */
.menu {
  background-color: lightgray;
  padding: 10px;
}

/* Menu list - removes bullets and adds horizontal display */
.menu ul {
  display: flex; /* Use flexbox for layout */
  list-style-type: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  justify-content: space-around; /* Distribute items evenly with space between */
  background-color: #f8f8f8; /* Light background color */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Menu items */
.menu ul li {
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  text-align: center;
}

/* Hover effect for menu items */
.menu ul li:hover {
  background-color: #575757;
}

/* Optional: Add some spacing between the menu items */
.menu ul li + li {
  margin-left: 15px;
}

Step 5: Update App.jsx with below content.

 

App.jsx

import University from "./pages/University";
import About from "./pages/About";
import Alumni from "./pages/Alumni";
import News from "./pages/News";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="university" element={<University />}>
          <Route path="alumni" element={<Alumni />} />
          <Route index element={<About />} />
          <Route path="news" element={<News />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 6: Update main.jsx with below content.

 

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Step 7: Build and run the Application by executing below commands.

  cd index-route-demo
  npm install
  npm run dev

Open the url ‘http://localhost:5173/university’, you can see that the About page content rendered.

 

You can download the application from this link.

Previous                                                    Next                                                    Home