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?
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');
get('query'). I was using foo as an example. I've corrected my answer.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');
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.
import { useLocation } from "react-router-dom";
const search = useLocation().search;
console.log('path', search);
const id = new URLSearchParams(search).get("id");
console.log(id);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
this.props.location.searchdoesn't contain the query. You need to look inwindow.location.search.