Sometimes, we want to get URL parameters in component in React Router v4.
In this article, we’ll look at how to get URL parameters in component in React Router v4.
How to get URL parameters in component in React Router v4?
To get URL parameters in component in React Router v4, we can use the useParams hook.
For instance, we write
<Route path="/:id" children={<Child />} />
to add a Route with the children prop set to Child to render it if we go to /:id.
:id is the placeholder for the id route parameter.
Then in Child, we write
const { id } = useParams();
to call the useParams hook to return an object with the URL parameters.
And we can get the value of the :id with id.
Conclusion
To get URL parameters in component in React Router v4, we can use the useParams hook.
