Index Route in React Router

In this lesson we will learn what index routes are.

First, let's pay attention to one thing. When we are on the main page, on the right we see just a blank screen. This is because none of the child routes match the address /, and we haven't said what to display in this case. In this case, in order not to display a blank page, you can use index route - a child route that has no path, and its element is displayed in the parent Outlet when none of the child routes match. With the help of such routes, you can place some information, or statistics, or something similar. As in the case of regular ones, they can be used to load data.

Let's create a file index.jsx in the routes folder, and in it a component Index:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Hi, React Router!</p>
      <p>This is an application for my products :)</p>
    </div>
  );
}

Now let's go to main.jsx and import our Index component there:

main.jsximport Index from './routes/index';

And the first element in the children array we will add an object where the index property is set to true, and our Index component will be the element to display:

main.jsx{ index: true, element: <Index /> },