Max: 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.