Sometimes, we want to pass URL parameters to components with React Router.
In this article, we’ll look at how to pass URL parameters to components with React Router.
Pass URL Parameters to Component with React Router
We can pass URL parameters if we create a route that allows us to pass parameters to it.
For instance, we can write:
const App = () => {
return (
<Router>
<div>
<ul>
<li>
<Link to="/foo">foo</Link>
</li>
<li>
<Link to="/bar">bar</Link>
</li>
<li>
<Link to="/baz">baz</Link>
</li>
</ul>
<Switch>
<Route path="/:id" children={<Child />} />
</Switch>
</div>
</Router>
);
}
function Child() {
const { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
We have a Child component that has the useParams hook.
It lets us get the URL parameters that we want and it’s passed in from navigation.
It returns the URL parameter as a key-value pair.
The keys are what we defined and the value is what we have passed when we navigate.
In App , we have the Link components with the paths.
And also we have the Switch components that have the route that takes the id URL parameter.
The Route has the route that we pass in. children has the component that’s displayed.
Conclusion
We can pass URL parameters if we create a route that allows us to pass parameters to it.
