react-router-dom with multiple query strings does not work

Question

I am new to react router. I use react-router-dom 4.2.2 in my router set up I have:

<Route path={"/confirmuser/:confirmation_code/:username"} component={ConfirmUser} />

and here is a sample url I am trying to achieve:

localhost:3003/confirmuser?confirmation_code=986797&username=5f1

As you see I am trying to send multiple query strings. in the confirmUser I read the query strings as follow:

    console.log(this.props.match.params.confirmation_code);
    console.log(this.props.match.params.username);

However I do not even get directed to this component and it seems react is not able to route to that page properly. Any idea?

try with path="/confirmuser/:confirmation_code/:username", without the {} — Damian Peralta
– Damian Peralta, Commented Apr 11, 2018 at 12:54

Oblosys · Accepted Answer · 2018-04-11 13:09:57Z

1

React-router v4 doesn't parse query strings anymore, so you either have to do the parsing yourself (not recommended), or use a package like query-string. An easy way to access the values is with a wrapper component, like this:

import * as queryString from 'query-string';
..

const WrappedConfirmUser = () => {
  const {confirmation_code, username} = queryString.parse(location.search);
  return <ConfirmUser confirmation_code={confirmation_code} username={username}/>;
}

answered Apr 11, 2018 at 13:09

Oblosys

15.2k3 gold badges33 silver badges41 bronze badges

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

Comments

Sander Garretsen · Accepted Answer · 2018-04-11 13:08:56Z

1

You are trying to map search-params to path segments?

The Route you defined will try to match the path, not the search params. Try: http://localhost:3003/confirmuser/986797/5f1 and the values will be in this.props.match.params like this:

{
  confirmation_code: '986797',
  username: '5f1',
}

if you still want to read the search params, you can access them from this.props.location.search, but react-router will not match them to a route for you.

answered Apr 11, 2018 at 13:08

Sander Garretsen

1,72310 silver badges19 bronze badges

Comments

Arkej · Accepted Answer · 2018-04-11 13:09:45Z

1

Your path doesn't match your url.

It matches localhost:3003/confirmuser/986797/5f1

Then you can access params using extra prop match:

{props.match.params.confirmation_code}

{props.match.params.username}

answered Apr 11, 2018 at 13:09

Arkej

2,2611 gold badge16 silver badges22 bronze badges

Collectives™ on Stack Overflow

react-router-dom with multiple query strings does not work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related