How to get query string of a current URL in React

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.