All language subtitles for 014 Practicing Nested Routes_en

So let's now add

this comments section together.

And again, let's make sure that it only shows up

if we are on slash quotes slash some id slash comments.

Now for this, we can render a nested route here,

which means we can import that route component

from React Router DOM, and then below the paragraph,

we can add this route component.

We then give it a path of, for example,

the path here could be slash quotes

slash some id slash comments.

And here we'll have a problem.

Some id, of course, is not always the same id.

It's dynamic.

This quote detail page will be loaded for different ideas.

But we do get the id here,

so we can actually construct a dynamic path here.

And that is something we haven't done up to this point,

but since this is a regular React component

with a regular prop, you can, of course,

also pass in dynamic values, and not just hard-coded paths.

So here we can pass a dynamic value as a path.

And for example, create a template literal,

which is slash quotes slash.

Then we inject params.quoteId,

and then we add slash comments.

So now this route path is constructed dynamically

and it depends on the quote id

for which this quote detail component was loaded.

And that is absolutely something you can build

that you register a route where the path

for which it loads a component is dynamic.

That's not something we did thus far,

but since this is a regular React component,

it is something we can do and we're doing it here.

So now here between the opening and closing route tags,

we can again define which components should be loaded.

And for that I did prepare

this comments component in advance here,

and it's this component which should be loaded now.

So I import comments from going up one level,

diving into components, comments,

and then this comments component here.

And simply add comments here like this.

If I now save this,

if I visit slash quotes slash first quote slash comments,

I do see this comments block here

with this add a comment button

which then opens this super big forum.

The styling is not final yet,

we'll continue working on that.

But we see that it works.

If I just visit slash quotes slash first quote

without slash comments, we don't see that comments block.

So this nested route is working in the way it should.