React Router: IndexRoute

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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

[00:00] 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."

[00:23] 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.

[00:46] 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.

[00:59] 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.

[01:23] 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.

[01:41] 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.

sk29110
sk29110
~ 6 years ago

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

kevin
kevin
~ 6 years ago

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.

Michal Svorc
Michal Svorc
~ 5 years ago

<IndexRoute /> is no longer supported in react-router v4, try using <Switch /> instead