How to Access the URL Params in React with React Router's useParams Hook

This guide walks through how to utilize React Router's useParams hook to get access to the URL params data for a route, such as a dynamic ID in a route.
Source code: github.com/jor...

[@Aaron-sy5yx]

Love how you left the error in and explained in detail how to fix it. Much better than having a "perfect" video where everything just works.

[@marinav3940]

Best description! Thank you so much. Most youtube dev pages talk too fast and don’t explain the little important things.

[@taylorbarron4950]

This is exactly what I needed to complete my project. Well put in less than 10 minutes. Thank you!

[@antipusrises]

I really appreciate that you used TypeScript in this, as I was dealing with a very similar type issue in my code and this helped me understand things better.

[@MBogan]

Brilliant guide, I was really struggling to wrap my head around this before I found your video, thank you!

[@vasilemidrigan50]

A nice observation about another tutorials regarding to id .......

[@diegoguatemala5287]

exactly what I needed, just right to the point and very well explained! You can tell how much experience he's gotten! Thanks for this man!

[@qingsong4099]

Great guide!!! This is what I have been looking for!!! Thank you so much for such a clear and detailed explanation!

[@lucianasuciu4798]

i love you !! 😂😍 I was searching for 3h for this information. Thanks a lot ! 😘

[@mohammadhuzaifa5985]

Great guide last one day I was searching but you solve my problem thanks. I do 777 like and 55 comment complete😂😂😂😂

[@Barzx]

it is a shame that this doesn't works with router 6, is a good video

[@munawarhussain4040]

Thanks a lot man. I had seen a number of videos but all of them were using another technique.

[@sanjamsinghkalsi5937]

Thankyou so much!!! Really helped me in my company's project! :)

[@aris13pat1]

Thank you. The best explanation I've come across. Subscribed! Keep up the good work!

[@width19]

goshhh, you explain things so clearly

[@buteranelly3132]

Thanks man you have no idea how much you've helped me

[@jimcarpenter7174]

Thank you! This is exactly what I was looking for.

[@mertsuhaigac167]

you saved my day this is exactly what I needed thanks for the tutorial

[@kmax2356]

Really thank you brother, It was help to release my stress... 🥰

[@AdrianzDev]

Nice! I used it to create a referral link.

[@Djolesabijacica]

nice explanation

[@tajanamarijaatanaskova2201]

Thank you so much!!! I really needed this

[@nituchoudhury1294]

Thanks a ton! This is really very helpful

[@shepniel]

Excellent video, thanks for sharing :)

[@calebbogale8262]

very helpful thanks

[@ne1butu1]

This was fantastic. Thank you!

[@nagalakshmibutti8067]

useParams() is not working in the Class component. Then how can we get URL parameters when we use class component instead of a function component?

[@mpb0406]

Great explanation!

[@coreydevl7021]

thanx for the help!

[@Room3102]

Awesome tutorial. I think you might have helped solve a problem of mine. Instant subscribe.

[@sirbalafort2620]

Great tutorial! I have a question: If I didn't want to pass the destructured { id } into the body where I am rendering, where would I pass it into the component? Say, for the purposes of rendering individual blog posts and for practical reasons not wanting the { id } to show up in the body with the blog texts.

[@edutechional]

I'm not sure if I completely understand what you're wanting to do, but you could always create nested components and then pass the ID value as a prop

[@sirbalafort2620]

@@edutechional That answers my question, thank you!

[@expectations2188]

love you man ..

[@binhtruong3373]

Thanks so much, it really helps

[@salarhashemian3436]

Thanks man! this really helped

[@ionlytakeaction3773]

Great amazing guide, what theme?

[@ryansatchell2302]

Any vids on doing this without useParams? I can't convert my react class to a SFC and thus hooks are not allowed.

[@knwoledgeseeker381]

I've done the same but my username and password are showing in the URL wich i dont like.. any idea how to hide it ??

[@abhishekraut2518]

Thank you man !

[@JOEY-xj4ds]

Update: 'Switch' has been changed to 'Routes'. Just happened like a few days ago lol

[@shadowrebels1623]

perfect !

[@thebrain678]

Is there a way to initially start use params with the value? What I mean is without clicking on the route so you just start the page off with already a value

[@taylorbarron4950]

useEffect with the param value is probably what you want to do if you haven't figured it out yet

[@selindemircioglu3502]

THANKSSSSSSS CNM

[@cengiz-ilhan]

clear english :)

[@soaibshaikh8559]

hey! i want to get url data using class component how can i get this ?

[@nemss5366]

bro ? can use UseParams on a class component ? above render method ?

[@harutinnnn1]

In a function, this is clear, but how to do it in a class?

[@ishowvideos11]

Hey, Can you please make a video on passing URL params using react-router-dom V6?

[@kunalpatil1250]

i want to pass user id in url , then what should i do

[@amritraj658]

Thankuu so much

[@vivekn4u]

hi, nice tutorial also can you explain how to get from data in a hook like a query string. in PHP we use $_POST[""], but not able to find anything in reactjs except query string for URL params. Thank you in advance

[@edutechional]

If you're using React Router, it's very similar to the process I showed. They have a 'useParams' hook that let's you get the query string value, this shows how to use it: reactrouter.com/web/example/url-params

[@vivekn4u]

@@edutechional thank you for the reply but my use case is that the payment gateway is sending the success/failure response to my reactjs page route and the reply is in Form data, if the data is in url I can get it using query string but don't know how to get this form data (POST method) which is In key-value pair.

[@erwinharnaldolauracuisara8360]

thanks!!!!

[@welingsonsantos9572]

Thanks

[@Human_Evolution-]

flew over my head at the end : ???? : ?????? meeeeh

[@filip23128]

thanx

[@andybiersack4906]

#useParams()