How to get query string using React?

Question

I'm trying to get "query=123" from the url http://localhost:3000/?query=123. Tried

//App.js
const search = this.props.location.search;
const params = new URLSearchParams(search);
const foo = params.get('foo');

console.log(this.props);

and my console shows this https://d.pr/i/w5tAYF which doesn't show location.search anywhere... any idea how I would get the query string?

Answer 1

React doesn't handle URL search parameters. You need to look in the window object for them instead. Here's how you would get the value of query:

let search = window.location.search;
let params = new URLSearchParams(search);
let foo = params.get('query');

Answer 2

I created a separate function for the query string.

function useQuery() {
  return new URLSearchParams(window.location.search);
}

Then I can provide the query string I want to get. In your case its query

  let query = useQuery().get('query');

Answer 3

Within your component, you can do something like this:

const values = queryString.parse(this.props.location.search)
console.log(values.filter) 
console.log(values.origin) 

There is more here.

Answer 4

import { useLocation } from "react-router-dom";

const search = useLocation().search;
console.log('path', search);
const id = new URLSearchParams(search).get("id");
console.log(id);

Answer 5

If you want to get query params from a custom URL, not the currently opened URL, you can use the code below.

const customURL = 'https://custom.url.com?success=true'
const params = new URLSearchParams(customURL.split('?')[1])

const successParamValue = params.get('success')

If you are using React Native you will need additional step to support URLSearchParams. Just install below package. that's it!

npm install react-native-url-polyfill

or

yarn add react-native-url-polyfill