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: Nested Routes

    0.14 - 16
    react-routerReact Router

    Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX. In this lesson we'll explore nesting routes and accessing the children of parent routes.



    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




    When we want to create nested routes with React router, it's as simple as just placing a route inside of another route component. We've got our little application here. We've got home, about, and contact, each as its own route.

    What I'm going to do is take about and make it a child of home. I'm going to take contact, and I'm going to make it a child of about. We can actually get rid of the absolute paths here. Up here, let's see, about is going to stay the same.

    Contact is going to become /about, /contact. When we save that, nothing much is really going to happen, because these components need to know about their children. In home, we're going to take in props.

    We're actually going to do the same thing in about, since we need to get to the component's children. Here in home, right after links, we're going to say props.children, and in this case, that is going to be the about component.

    In about and contact, I'm going to go ahead and get rid of the links component, because it's just going to get very confusing. In the about component, I'm going to go ahead and drop props children, which is, in fact, going to be contact.

    Let's go and just save that and try it out. We're here on the home route. When we go to about, we've got our home component, represented by this route right here. Of course, we've got our links, and then we've got our props children, which is the component that is rendered at the about path. It's our about component.

    When I go to contact, we've got all three components on the page. That's represented here by the props children in our about component, and that props children is, in fact, the contact component. We've got home, which has a child of about, which has a child of contact.