How to get queryString from url?

Question

I am trying to get the key from the url, it's not getting anything,

this is the browser url for e.g i want like this

auth/reset-password/finish?key=123

i am setting the Route like this

 path: '/auth/reset-password/finish/:key?'

here is the main component

  const key = queryString.parse('key', location.search);

if i did the console, it's giving me null

i did console log the location it's giving me like this

pathname: "/auth/reset-password/finish"
search: "?key=Hci5deBRQJSofcD0aVru"
 hash: ""
 state: undefined
__proto__: Object

You can use the `match` object of `react-router`. – Utsav Patel Apr 07 '20 at 11:29 — Utsav Patel, Apr 07 '20 at 11:29

fabrice · Answer 1 · 2020-04-07T11:52:55.053

0

If you are using react-router you can get the query from the location object:

this.props.location.query.key

To get the named params you can use:

this.props.match.params.key

EDIT: this solution applies to react-router 3 and below.

edited Apr 07 '20 at 11:52

answered Apr 07 '20 at 11:29

fabrice

178
1
1
8

check you this.params to see if you have acces to location and match – fabrice Apr 07 '20 at 11:37
I see, I think you are using react-router 4 or above which no longer parses the query string have a look at [this](https://stackoverflow.com/questions/35352638/react-how-to-get-parameter-value-from-query-string) – fabrice Apr 07 '20 at 11:43
"react-router": "^5.1.2", yes this the ver i am using – Anil Loutombam Apr 07 '20 at 11:44
i got the solution.. it's because of the react-router version.. ` console.log(queryString.parse(location.search)); this one works` – Anil Loutombam Apr 07 '20 at 11:49
Glad you got it sorted. Maybe you should create an answer for your own question now that you have found the solution :) – fabrice Apr 07 '20 at 11:51

score 0 · Answer 2 · answered Apr 07 '20 at 11:30

0

If your path is path: /auth/reset-password/finish/:key?
so your route should be /auth/reset-password/finish/123

You can access key by this.props.match.params.key

here match you will get from react-router

answered Apr 07 '20 at 11:30

Jay

2,826
2
13
28

score 0 · Answer 3 · answered Apr 07 '20 at 11:36

hope you well ,please check hope it will work

now this is function return a Object , have your all url paramerts

      callDecodeUrl=(url)=>{
       var decodeURL = decodeURIComponent((url + '').replace(/\+/g, '%20'));
       var query = queryString.parseUrl(decodeURL);
       return query.query
      }

 

    var url =  this.callDecodeUrl('https://stackoverflow.com/questions/61078853/is-there-way-to-get-querystring-from-url')
    console.log(url)

Anil Loutombam · Accepted Answer · 2020-12-24T04:31:05.803

0

[SOLUTION] So here is my answer to my problem

  const key = queryString.parse(location.search);

so if i did the console log. console.log('keyssss', key); it's giving me the key-value thank you all for the time

edited Dec 24 '20 at 04:31

answered Apr 07 '20 at 11:56

Anil Loutombam

355
6
19

How to get queryString from url?

4 Answers4