How to read URL Parameters within Component in React JS? [duplicate]

Question

This may sound dump, but how I am supposed to read the URL and get its values from an URL in React JS. I have been told to use the QueryString in order to handle the GET parameters.

The Url looks has following structure:

localhost/test?id=xxx&value=yyyy

in the component class I'm using following code:

class test extends Component {

  func() {
    const params = queryString.parse(location.search);

     //here I get: {?id=xxx&value=yyyy}
  }
}

How does it come that the Questionmark Sign has been retrived also? And how to fix it, so that I am able to get those values without crafting too much?

@Ashish, the question is the same, but the answer does not fit fully my requirements. I do not want to use window.location.search when there is some npm libraries which may handle it in much better way- — Christian Felix
– Christian Felix, Commented May 13, 2019 at 12:52
Just for the sake of getting parameters, i dont think using any library is good idea. When you can achieve this with a small util function of your own. I would prefer that. — Ashish
– Ashish, Commented May 13, 2019 at 16:11

AdamGold · Accepted Answer · 2019-05-13 13:17:33Z

16

You can use `URLSearchParams`:

const windowUrl = window.location.search;
const params = new URLSearchParams(windowUrl);
// params['id']

Or, if you desire to use `react-router` solutions, you can see this answer.

edited May 13, 2019 at 13:17

answered May 13, 2019 at 12:06

AdamGold

5,1014 gold badges32 silver badges51 bronze badges

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

1 Comment

Christian Felix Over a year ago

react-router is my desired approach. For now I just only wanted to read the GET paramaters.

Katia Wheeler · Accepted Answer · 2019-05-13 12:35:51Z

6

If you're utilizing react-router, it's pretty easy. See this: https://tylermcginnis.com/react-router-query-strings/

answered May 13, 2019 at 12:35

Katia Wheeler

5494 silver badges9 bronze badges

6 Comments

Christian Felix Over a year ago

Do I have to use the react-router, even if I only want to retrive the url without doing anything else? For some reason accessing the params.id results in undefined..

Katia Wheeler Over a year ago

If you don't want to use react-router you could try this library: npmjs.com/package/query-string

Christian Felix Over a year ago

I'm using it already.. but the question is: how to get the individual values from it?

Katia Wheeler Over a year ago

If you use the query-string pacakge, it has a .parse() function that creates an object from the query string of the URL. So, let's say the url was ?search=something?dog=cat. After calling the parse method, you would have an object like the following { search: 'something', dog: 'cat' } that you could access the individual properties from where you need them

Christian Felix Over a year ago

for some reason I was using the querystring not the query-string package..Not sure if there are any significant differences. Right now, I will remove the prevous one and install the query-string for that... maybe its the reason why the ignoreQueryPrefix: true Parameter has worked as expected.

|

Collectives™ on Stack Overflow

How to read URL Parameters within Component in React JS? [duplicate]

2 Answers 2

You can use `URLSearchParams`:

Or, if you desire to use `react-router` solutions, you can see this answer.

1 Comment

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You can use URLSearchParams:

Or, if you desire to use react-router solutions, you can see this answer.

1 Comment

6 Comments

Linked

Related

You can use `URLSearchParams`:

Or, if you desire to use `react-router` solutions, you can see this answer.