First, let’s see how to get query params without using any library. Then we’ll see how to do so using react-router library, often used to implement navigation features in React.

URLSearchParams to Get query params in React

URLSearchParams is a public interface that you to search and get query parameters in React. It is accessible in all web apps that run in the browser.

Let’s say you have a functional component named User, and it renders on the following URL:

https://crzzmn.csb.app/?id=4

id is a query parameter in this URL. It has a value of 4. Query values are not constant and might change.

In order to get query params in React, we need to create a new instance of URLSearchParams() interface and store it in a variable.

URLSearchParams() needs to receive one argument – current queries in the URL. This value is accessible on document.location.search.

Let’s look at code example:

function User() {
  const params = new URLSearchParams(document.location.search);
  return (
    <div className="App">
      <h1>User ID: {params.get("id")}</h1>
    </div>
  );
}

First, we create params variable to store an instance of URLSearchParams().

Then you need to get queries from the variable. You need to reference params variable inside JSX.

As you know, curly braces are necessary to write JavaScript expressions inside JSX.

You need curly braces to call get() method on the variable and get query params in React.

Important: you need to pass name of the parameter to the get() method. In this case, our query contains id parameter, so we pass ‘id’ string. Name of the parameter needs to be passed as a string.

In this example, we are working with this URL:

https://crzzmn.csb.app/?id=4

So the component renders the following result:

Get query params using react-router library

React-router provides useful shortcuts to implement navigation features in React.

react-router v6

The latest version of react-router provides useSearchParams hook, so you can easily get query params.

To use it, you need to import useSearchParams from ‘react-router-dom’.

import { useSearchParams } from 'react-router-dom'

useSearchParams returns two values – parameters and a function to update parameters. You need to create two variables to store them.

Let’s look at an example:

const [params, setParams] = useSearchParams()

Now params variable holds parameters. Inside JSX, you can use get() method to get query parameters.

<p>Parameters: {params.get(‘id’)}</p>

react-router v5

react-router v5 does not provide useSearchParams hook, so you need to take a few extra steps to get query params.

We need to use URLSearchParams() interface to create an instance based on current queries in the URL.

Fortunately, you can use useLocation hook to get current URL, and then call search() method to get parameters.

Import {useLocation} from ‘react-router-dom’
Const Form = () => {
const search = useLocation().search()
…
}

Create an instance of URLSearchParams(search) and store it in params variable.

Import {useLocation} from ‘react-router-dom’

const Form = () => {

const search = useLocation().search()

const params = new URLSearchParams(search)

}

Now you can actually get parameters inside JSX. Use curly braces to insert a JavaScript expression. Call the get() method on params variable and pass it the name of parameter.

<p>Parameters: {params.get(‘id’)}</p>