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