This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: IndexRoute

1:55 React lesson by

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

Avatar
sk29110

After your change /about path should not be existed right?

Avatar
kevin

If you follow this video, and at the end click on the link created to go to about, rather than clicking the link for home, you will get a routing error. fyi, you need to add a Route for the about link to go to.

In React router, IndexRoute allows us to render a default component when no other route is present. To get us started, I'm going to also include IndexRoute from React library and our home component, I'm going to call this outer and that'll just make more sense. Here I'm going to say "our site."

We're going to have our lanes but we're also going to need to get our prompts, children. We're going to pass in prompts and we're going to pass in or we're going to use prompts.children and then our other components won't need these links components because they're both going to be children of our outer components.

Here, in our root path, we're going to use our outer component. We're going to make both of these other paths children of that path, or that route.

We can get rid of the absolute path on contact and we're going to update route on the About path to be IndexRoute. It's going to be IndexRoute and that does not in fact need a path. We're going to get rid of that. We're going to leave About as its component to render.

What happens here is when we get to the outermost path, the route path, we're going to render this component outer. But if there's no other path after the forward slash, we're automatically going to render the About component as a child of the outer component.

We'll save that and we can see that we've automatically rendered About. When we switch to contact, we get contact, no problem. But if we go to home, again, we get About automatically.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?