Question mark inside react router path

Question

I'm trying to pass parameter inside my URL, but I have a problem with reading. I'm using react-router v4.

URL: http://localhost:3000/reset?token=123 I'm trying to read it this way:

<Route
   path="/reset?token=:token"
   component={Reset}/>

But this prints empty object console.log(this.props.match.params);. What is strange I have tried to change question mark to other character and looks like it solves my problem, but I would like to keep question mark anyway.

URL: http://localhost:3000/reset_token=123

<Route
   path="/reset_token=:token"
   component={Reset}/>

This already works console.log(this.props.match.params);. Any idea how to make question mark works also correct? Really important to me is to keep using just react-router without any external libs.

Cheers, Daniel

Answer 1

How did I solved this issue.

http://localhost:3000?token=mypetismissing

export default function ({ location }) {
  const urlParams = new URLSearchParams(location.search);
  const token = urlParams.get('token');
  console.log(myParams)

  return (
    <div>
      {token}
    </div>
  )
}

Answer 2

You need query-string

Example: http://yoursite.com/page?search=hello

const queryString = require('query-string')

class ProductsPage extends React.Component {
  componentDidMount() {
    let search = queryString.parse(this.props.location.search).search
    console.log(search) // ==> hello
  }

...
}

Answer 3

Change your path to '/reset'. That'll get the page to render with the token still in the url and you'll be able to grab that token. Happy coding :)

<Route
path="/reset"
component={Reset}/>