Using index routes
Currently, the app’s root path displays nothing other than the header. In this section, we will learn about index routes to display a nice welcome message in the root path.
Understanding index routes
An index route can be thought of as a default child route. In React Router, if no children match a parent route, it will display an index route if one is defined. An index route has no path and instead has an index Boolean property, as in the following example:
{
path: "/",
element: <App />,
children: [
{
index: true,
element: <HomePage />,
},
...,
]
}
Next, we will add a home page using an index route in our app.
Using an index route in the app
Carry out the following steps to add a home page using an index route in our app:
-
...