Original subtitles

Were you successful?

Let's do it together.

And let's start with redirecting.

I want to redirect from slash nothing to slash quotes,

and for that, in my route, route definition,

in this route component instead of this switch block here,

I'll add another route.

And here the path will just be slash nothing.

We should also add the exact prop here

so that we don't look at the beginning of the path

but we only match full paths.

And then here, I don't want to render a custom component

but instead we'll render

a component provided by React Router.

And that's the redirect component.

Whenever this component gets rendered,

the browser redirects.

So it loads a different URL, a different path.

And here inside of this first route,

I now do want to redirect and reduce that to two prop here

to tell React Router where to redirect.

And I want to redirect to slash quotes here.

So that if we visit our domain slash nothing,

we redirect to our domain slash quotes.

And with this, if we enter local hosts 3000, like this,

it automatically changes to slash quotes.

Now the other task I gave you was to extract this quote ID

on this quote detail page.

And we also learned how that works.

Inside of that loaded component,

we can use a special hook provided by a React Router DOM.

We can use the useParams hook

which we import from React Router DOM,

and then we can call useParams

in this functional component and get access to the params.

And then now that we got access,

we can output the params, of course.

We could for example, add a fragment,

or a section or a div here.

Of course, if you do go for a fragment as I do here,

you need to import it from React,

and then here, below that, we could have a paragraph

where we simply output params.quoteID

Now it's dot quote ID here

because I gave my identifier a name of quoteID.

Here after the colon, whatever you chose here,

that's the key which you then can access

on this params object in your component.

And with this, if we save that,

and I enter slash quotes, slash first dash quote,

for example, I see first quote, down here.

So this is now also working and with that,

we applied almost all the things I wanted to apply.

One thing is missing though, and that's a nested route.

Which I wanna add.

We currently don't have any real data which we use,

we'll do that later,

but I already wanna simulate that on the quote detail page

we might have comments for that quote

so that users can leave comments for a quote.

Hence below that paragraph,

I want to render this comments component.

Now for this, we could of course embed it

just as we always do.

But now here's the interesting thing,

I wanna use a nested route for this

so that if we just visit slash quotes, slash some ID,

we don't see the comments.

Only if we visit slash quotes, slash some ID,

like first quote in this case, slash comments.

Only if we have slash comments at the end,

only then the comments components

should be loaded below this paragraph.

And that there for your task.

Render the comments by using a nested route.

We'll do it together in the next lecture.