How can I parse the query in url in react js using url-parse package?

Question

I want to parse the query in the url in react js like this :

 const location = useHistory().location;
 const parsed = parse(location, true);
 console.log(parsed);

But the console gives me this :

host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/[object Object]"
origin: "http://localhost:3000"
password: ""
pathname: "/[object Object]"
port: "3000"
protocol: "http:"
query: {}
slashes: true

The query object is empty which I need that one and the pathname is not useable . How can I parse the query in url in react js using url-parse package properly?

Can this help?

Shubham Verma
– Shubham Verma

2020-08-29 13:24:40 +00:00
Commented Aug 29, 2020 at 13:24 — Shubham Verma
– Shubham Verma, Commented Aug 29, 2020 at 13:24

Mehdi Faraji · Accepted Answer · 2020-09-01 01:59:19Z

3

Fixed the problem by using the query-string package.

import queryString from 'query-string';

const location = useHistory().location;
const query = queryString.parse(location.search); // returns the query object

answered Sep 1, 2020 at 1:59

Mehdi Faraji

4,11411 gold badges48 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artur Ampilogov · Accepted Answer · 2021-08-19 12:16:36Z

2

I think you are using the wrong react hooks. useHistory hook is used for programmatic navigation purposes. For accessing location object use useLocation.

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

const location = useLocation();
const parsed = parse(location.search, true);

edited Aug 19, 2021 at 12:16

Artur Ampilogov

9,4991 gold badge64 silver badges65 bronze badges

answered Aug 29, 2020 at 14:29

Mst Ghafouri

436 bronze badges

Collectives™ on Stack Overflow

How can I parse the query in url in react js using url-parse package?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related