Original subtitles

To really utilize this dynamic path feature,

we need access to the concrete value

entered in the URL inside of the loaded component.

So here in the product detail component,

I wanna find out what the product ID is

for which this component whilst loaded

so that then in this component,

I could make a request to the back-end,

to the API, to fetch the full data for that product.

And getting that concrete value is again,

thankfully, straightforward.

Again we can import from React Router DOM

and from there, we import a special hook,

a custom hook not created by us

but by the React Router team.

We can use the UseParams hook.

And if we call UseParams, this hook will return

a params object, which we can store in a constant.

And this object will have key value pairs

where the keys are the dynamic segments

leading to that page.

In this case, we have one dynamic segment

but we could have multiple segments if we needed.

Here, we don't need multiple segments though

so one segment is fine

and we'll then have this identifier,

which we specified here after the colon

as a key in this params object, which we get here.

So here we could console log params.productID,

productID because I used productID as a key here.

And we can of course not just console log it,

but we could also output it here.

We could add a paragraph here

and then the value which I wanna output here

is params.ProductID.

If we save this,

now I see anything dash else here,

because I am on product dash details slash anything else.

If I enter P1 here, I see P1.

If I enter P2 here, I see P2.

And for the moment, we're not doing anything fancy

with it, we're not using it to send an HTTP request

or anything like that,

but we will do that a little bit later

once we build a more realistic project with React Router,

right after we finish these basics here.