All language subtitles for 022 Getting Creative With Nested Routes_en

Now we are nearing the end of this module.

You might remember that on this quote detail page

we actually also had this comments feature.

At the moment we don't really have comments

but we do have does nested route

but currently we can only reach this route

by manually adding this comments path here at the end.

Now we might want to give the user a link

that loads to comments or something like this.

And that is something which we can implement indeed.

Something which we did do before already,

adding a link isn't too difficult.

And therefore, of course, feel free to try this on your own.

On the quote detail page, add a link

below the highlighted quote,

which will load the comments

and navigate us to this path here.

Here's a short pause for you to do this on your own.

Thereafter we'll do it together.

So let's add this link now,

for this we need to import,

link from react-router-DOM

and then here in highlighted quote,

we can add a link.

And actually I will wrap this in a div

with a class name of centered

using this globally defined centered class here.

And I'll then move my link into that div

but that's of course optional.

Then this link could say load comments

and hence leads to the current URL/comments.

Now for this I need to construct the destination dynamically

because the quote ideas dynamic

it depends on which quote you loaded.

So I actually we can copy this code from down there

because that's the path we want to navigate to.

We wanna load this route in the end.

Now I will also give this link extra class name.

It's not something we did before

but we can add classes to the anchor tag

which link renders by using the regular class named prop.

And here I'm using a global class again

which is defined in that index CSS file.

With all of that if we saved this,

we got this load comments link here.

And hence now if I go to a quote without /comments

if I click load comments, we see that.

But maybe we also want to make that link disappear

after we load it to comments.

Now we could try to implement this

by looking at the URL and check

whether we are on the comments page or not

but we don't have to do this ourselves.

We can hand that work off to react router.

We can also move this here into a route.

And that might be strange at first,

but it is actually just embracing the functionality,

react router gives us.

We can add a new nested route here

and this nested route should be active

if the path is this path,

but without the comments.

So if we're on the page without slash comments

then this route should become active.

And only then.

So I will add the exact prop here

so that we're not matching the beginning of a path

but the full path.

Then I want to render this div because we can render

any JSX code we want for any route we define.

Now with this change made,

we don't see the load comments text

if we are on slash comments.

But if I am on just the detailed page

I do see load comments, but as soon as I click it

it disappears because we changed to the nested route.

And I'm showing this to you

because I want you to really play

around with react router and use its features.

You can build something

like this with help of nested routes.

And this is a way

of using those nested routes feature

to conditionally render different content based on the URL

without you having to manage some complex state.

React router does that for you.