And to complete our reactor out our dump setup we're gonna run the rest of the pages starting from checkout
all the way to a product details but the product details is going to be a bit different and you can
think of product details as a placeholder because keep in mind.
Product details is not going to be hardcoded in fact for each and every product I can open up the page
and there's going to be specific information about that product.
So we're gonna have a placeholder.
Then we're just going to fetch information about that specific product and then we're gonna render it.
I'm going to we're going to do that using the URL primers.
If you check out the finished project you're going to notice that each and every time you're navigating
to a single product page the URL is going to be product and then whatever the idea in this case this
is done I'm going to head over to a different product.
Then the idea is going to change.
And in this case it is going to be nine.
So let's start again very simply by just getting the rest of the pages.
Check out logging and product and then we're going to start dealing with product details.
So what I'm gonna do above the error I'm just gonna copy and paste it again and make sure that we get
the right pages.
So I'm going to say the path is going to be checkout design also the component is gonna be checkout
and I know it's a bit tedious but I mean we just have to do this.
So let me copy it one more time then I'm gonna go for a log in so the page I want to display is a log
in page and then of course the path also should match.
So I'm gonna go with a log in then let me check.
I have the product nine as well I have the product details.
So in this case let me copy and paste it.
1 2 and 9 for the products.
The path is gonna be products and then of course the page that I would want to display is the product
page.
However I'm also going to add here exact like.
So now we're gonna start dealing with our product details first of all what is going to be bath what
the path is going to be PRODUCTS AND THEN WE'RE GONNA PASS IN OUR you are up grammars the way we set
up the URL parameters we have the call colon and then whatever name we would want.
Now in my case I'm going to go with an idea but please understand how you can use whatever name you
want it's still going to work.
So even if you would name this banana you're still gonna be able to access that parameter.
And now we would need to say well what kind of page we would want to render.
However whenever we're dealing with you are all primers we're going to use children.
So instead of placing a product detail within the root we're going to lead this and we're going to go
with children and then within the children I'm going to display my product details.
So let me look for my component product details and I'm rendering right now my product details.
Let me save it and first let me show you where we can get more info.
Again if we had over back to the docs we have you our old parameters.
Correct.
And then what happens here is that again they start with a colon and then whatever name you want.
So in this case they're showing I.D. And we're also using the idea but you can name this whole you'd
like and then in the latest version at the time of the recording do you react or down 5 instead of using
the props like we did previously we use the use prams hook and in this case notice.
So I'm using used primes which is imported from react rather dumb.
And then I can just select whatever name.
So in this case it does need to match.
So if you named your parameter a banana.
Make sure that you're also accessing banana here.
If I name this I.D. then I'm going to access the eddy.
In that case I'm gonna display the dynamic info that's coming from the parameter.
And as always the best way to show that is if we're going to head over back to our project.
Now we're going to navigate to a product details and are currently again there's nothing there but we're
gonna set up our use Brown just so we can see how we can get a specific information about each and every
product.
So we do need to first do our import and we're going to import the use prams hook from reactor water
down so use prams and it's coming from react a router down.
So we have our import awesome.
We're going to have a low from product details and then of course we're gonna display some kind of unique
I.D. just so you can see that our functionality is working.
And then since it is a hook within our component I'm just going to say that I would want to get back
my I.D..
Now if you're interested what you're getting back you can just simply console log.
So you'd use Brahms since it's there's a hook we're just going to run it and then in order to see what
we're gonna have in the console you just need to navigate to a product and whatever you would want to
pass.
Now technically you don't even need to pass here.
No because what you're gonna be accessing the I.D. And remember you can call this however you'd like.
So again you can call the string or whatever you'd want.
But in my case I am going to pass the number and what we should have within a console is our use primes.
And I have nothing interesting not let's over back and check and yes the reason why I don't have anything
because my route should be products.
So now once I fix it once I say product because that is the proper out that I have in my URL you're
going to see that you're getting essentially back the object and then within the object you have your
I.D. again.
If I'm going to name this differently I'm gonna name this banana you're going to get banana back.
Now the value is still gonna be of course equal to five.
And also keep in mind that you're getting back a string not is gonna be later important when we're gonna
be fetching for that specific product but whatever parameter name you're gonna give.
Well that one you're going to access using the use primes.
So again I'm gonna switch back to I.D. And of course the only thing we need to do right now is to the
structure the I.D. from use primes and we can simply do that by assigning our let's say I.D. variable
to our use parameters.
So now we're just going to get our I.D. in order to show that we're getting the unique I.D. I'm just
gonna render it some say that I would like to show the I.D. So product I.D. is and we're going to have
a call in and then in this case I have hello from product details page product I.D. is five if we're
gonna change our You are a primer if let's say we're gonna set it equal to nine then of course our product
I.D. is going to be nine the way it's gonna work is we're gonna get all our product and then like I
said this page is going to be like a placeholder where for each and every time we're going to navigate
to that page we're going to grab the ideas we're going to grab the I.D. that is being passed in as our
parameter and then we're gonna fetch that specific product.
That's the reason why when we let's say navigate to a specific product page.
Well then we display the info about that product not about all the products or different product.
Not if we have the idea of sex.
Then we're going to display the product that has the idea of sex.