React Router Tutorial - 11 - URL Params

in the previous video we learned about Dynamic routes with react router we created the users's listing page and nested The users's Details page it's all working great but there is room for improvement at the moment we just display the text details about user irrespective of who the user is in the typical application you would want to extract the user ID and do something with that ID perhaps make an API call to fetch the details about that user for our scenario let's keep it simple and display the user ID from the URL in the component now

to extract the route parameter we need to import a hook from the react router package so in the user details file at the top import use params from react router Dom and then call the hook within the component use params with parenthesis the hook returns an object of key value pairs let's call it params so const params is equal to use params this object contains key value pairs of the dynamic params from from the current URL the parameter we want to access is user ID let's store that in a constant const user ID is equal

to params do user ID it is important to note here that user ID on the params object corresponds to the dynamic segment we have specified in the route config colon user ID once we have the user ID we can render it as part of the jsx details about user and we render the user ID if we now save the file and head back to the browser navigate to/ users SL1 and we see the text details about user one change it to slash2 we see details about user two sl00 details about user 100 so this is

pretty much how you get hold of URL params in your component import the use params hook and invoke it and access the property on The Returned object if you wish to you can destructure user ID in the same line so const D structure user ID and delete the next line save the file and the output Remains the Same in the next video let's take a look at search params with react router thank you for watching please do consider subscribing to the channel and I'll see you in the next one