useParams

[00:00:00]
>> A man Luna here. Let's say I want to get this ID here out of the path. How do I do that? Well, let me introduce you to your friend. useParams, so go to details.jsx, at the top here import useParams. You see use here, you should be thinking, this is a hook because it is, let me introduce you to this magic.

[00:00:34]
Const id equals useParams, there you go. And now, Replace hi with id. Look at that, it's correct. All right, so I'm clicking into all these pages and it's given me the correct ID for all the various different pets I'm looking at. How? Magic no it's not magic. It's something called context.

[00:01:08]
You and I are gonna do it directly here in just a second. But basically what's happening is you have App.jsx here we put this browser router component around our application, which is making this thing called context available to components underneath it. So it's basically passing it into this like sides store of data.

[00:01:29]
And then when I come back over to details, when I say useParams like, okay, I assume that a browser router is available. So I'm going to reach into a browser router and pull out something called the id. And that's where this id comes from. It's coming from that browser router component in the app.jsx.

[00:01:50]
That makes sense? So in other words if you delete this, let's just do it for fun, Yeah. I'm just gonna make this a div for a second. So now if I refresh the page, it's gonna say, hey, you're trying to use routes and stuff like that with a bunch of set.

[00:02:21]
It would basically give you an error. It has given me a lot of errors because, a lot of this stuff actually depends on browser router being there. But useParams does not work without a browser router to provide it with the information. That's my point there. useParams here gets the id from the browser router which it got from here.

[00:02:44]
>> Which we can see in the dev tools is it?
>> Yep, should be able to see them the dev tools as well. Components, I mean, you can see all of the indirection that this is all coming from browser router. So if I look at details, which I'm indeed we should, results app browser, I don't know what's going on there.

[00:03:11]
So details, here we go. Props, params you can see that it's getting this from context. The context is getting this from matches, matches has this zero one, the params is here. So, that's another useful tool for finding out where's this information coming from? One more thing here let's make this a clickable link here at the top.

[00:03:39]
So import a link up here at the top as well from React Router DOM. And we're just gonna give it a header and a link two slash adopt me. And now I got this nice little link here at the top that I can click on to go home.

[00:04:09]
Which is kind of the behavior you expect, right? If you're getting a use-hreflang error, that's one that I've seen before. Just make sure that the header is inside a browser router That's 80% of what makes react router useful that I've just shown you here. There's other stuff for sure, but it's for basic client side routing.