Last updated on May 23, 2021 by Suraj Sharma
In this tutorial, you'll learn to get query string of the current URL in React using react-router-dom v5.1
Consider, we have a <Link />
component in our React app like the one below
<Link to="/home?library=react&lang=javascript">Home</Link>
Anything after '?' in the URL are considered as query string of the URL.
First, To get the current URL we can use useLocation()
custom hook available in the react-router-dom
library
const location = useLocation();
Now we are going to separate the query string from the current URL using the JavaScript URLSearchParams interface.
To do this we are going to create a custom React hook useQueryString()
const useQueryString = () => {
const location = useLocation();
return new URLSearchParams(location.search);
}
This returns a URLSearchParams
object instance.
We can use the get()
method to retrieve the search parameters value inside the <Home />
component
const Home = () => {
const queryString = useQueryString();
return (
<p>{`Library is ${queryString.get('library')}`}</p>
<p>{`Language is ${queryString.get('lang')}`}</p>
);
}
Related Solutions
Rate this post
Suraj Sharma is the founder of Future Gen AI Services. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.