Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    React Router: IndexRoute

    0.14 - 16
    react-routerReact Router

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



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.