This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: Nested Routes

2:08 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Erik

Thank you for these great videos.

The Home component render method contains {props.children}, but when the / route is rendered, {props.children} is not rendered. (I.e., we only see 'Home' and the Links. As we see next, {props.children} is rendered when the /about route is requested.

My question is: when/where is the decision being made to render {props.children} in this demo?

In reply to egghead.io
Avatar
Joseph

{props.children} is rendered based on it's presence. At / there is no {props.children} as dictated by the routing, at /about the About component is {props/children} of Home, and at /about/contact the Contact component is {props/children} of About

In reply to Erik

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.

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