React-URLSearchParams returning Null object

Question

I am using the following code to retrieve query parameters from URL but URLSearchParams returns an empty object.

PS: uselocation.search returning correct output.

const stringdata = useLocation().search

const queryparameter = new URLSearchParams(stringdata)
    
console.log("query parameter :", queryparameter)
    
const query = queryparameter.get('q');
    
var url_string = `http://localhost:3000/recipes${query}`

Answer 1

You can try using window.location.search over user search params. That should look something like:

const queryParams = new URLSearchParams(window.location.search);
const query = queryParams.get('q');
let url_string = `http://localhost:3000/recipes${query}`;
        

Answer 2

The search property returns the querystring part of a URL, including the question mark (?).

const queryParams = new URLSearchParams(window.location.search);

Then you need to check if queryparameter.get('q') exists, otherwise it will return null and will append null to url.

let query;
if(queryParameter.has('q')){
   query = queryparameter.get('q');
}

then

 var url_string = `http://localhost:3000/recipes/${query}`