All language subtitles for 010 Working with Nested Routes_en

Before we now dive into a little demo project

to see all of that in action

in a little bit of a more realistic project,

there are two last features which I want to cover here

in this basic introduction

we're going through at the moment.

And the first feature is the support for nested routes

React Router DOM offers.

Now what do I mean with nested routes?

Depending on what you're building,

you could have the requirement

that you don't just have a couple of different main pages

but that instead, also inside of a page,

you want to have a route.

For example, let's say on the welcome page,

here we can also wrap this with a fragment

or a section or a div,

and then let's say, below the welcome page,

I want to have a separate conditional piece of content

that should greet a new user.

Because maybe I want to be able to visit

this welcome page with slash welcome,

but also with slash welcome, slash new user,

because maybe we had a link in a newsletter

which users could click,

and if they clicked it,

they should be taken to this special welcome page

and other users who come to our page from a different source

should just visit slash welcome.

For this, we can add a nested route simply by again,

using this route component from React Router DOM,

inside of another component.

So inside of this welcome component,

we can again define a route.

And this is important.

You're not limited to defining routes in one place only,

you can define routes wherever you want.

And if they are on a component which is currently active,

they will be evaluated by React Router DOM.

So if I add a route on the welcome page,

if the welcome page is active, this route will be evaluated.

If the welcome page is not active,

this route will not be evaluated.

So here, if I set a path of slash products for example,

to the show some content,

this route would never become active

because we can never be on that welcome page

for a path that starts with slash products.

If on the other hand, I set this

to slash welcome, slash new user,

then this route would be active if I am on the welcome page

because we are on slash welcome,

hence this component is loaded,

And there, we define another route

for slash new user after slash welcome.

So if that's our full path into URL,

then whatever is between these route texts,

would be loaded as well.

And here we could again, use another component

or also justifying some JSX code in line here.

For example, a paragraph we say welcome new user.

With that, if I save this,

if I visit just slash welcome,

I don't see this paragraph.

But if I visit slash welcome, slash new user,

I do see this paragraph.

And that's this nested routes feature.

We can define routes in other components,

in other routes therefore,

and then load more content

if we have a more specific path match like we have it here.

This is a feature which you can also use to build

more complex user interfaces.

And whilst you will probably not need it

in every application you build,

it can be helpful in a couple of applications.

We're also going to take a closer look at this feature

and how we can use this feature in this demo project.

We're going to dive in soon.