From the course: React Foundations by Pearson

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Defining nested routes

Defining nested routes - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Defining nested routes

“

React Router lets you define nested routes. This is what it looks like. You define a component which has a nested route table underneath it. So in this example here, I've got, if you like, a top-level route, products with nested routes, and when the user gets there, it'll render this component. I'll draw that here. Okay, so products with nested roots, that's this component here. The key point is, well, this component can render some stuff, but the key point is it has an outlet element. And that outlet element is like nested content, and the children property here specifies what to display inside the outlet. Depending on exactly which route you specify, different sub-components get displayed inside the outlet. So either this, or this, or this will be displayed inside the outlet element, nested inside the big component. So that's the mechanism. We need to describe how that actually works in detail. So, from the top, when the user navigates to this path, this component will be rendered…

Contents