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"
   ponent={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"
   ponent={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

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"
   ponent={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"
   ponent={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

• javascript
• reactjs
• url
• react-router

• Possible duplicate of How to get query parameters in react-router v4 – Mayank Shukla Commented Aug 17, 2017 at 9:39
• 1 @MayankShukla It's similar but i would like to stay just with react-router without any external lib. – Dan Zawadzki Commented Aug 17, 2017 at 9:41
• 1 in that case you can use this.props.location.search then split the values to get different query parameters. – Mayank Shukla Commented Aug 17, 2017 at 9:43
• 1 @MayankShukla Thanks! Looks like you solve my problem. Best way to solve it and keep using only react-router is this.props.location.search.split("=")[1] – Dan Zawadzki Commented Aug 17, 2017 at 9:49

5 Answers 5

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>
  )
}

You need query-string

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

const queryString = require('query-string')

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

...
}

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"
ponent={Reset}/>

Extracting Query Parameters from react router path

URL: http://localhost:3000/reset?token=123

First import useLocation from 'react-router-dom

And do this inside your functional ponent

const { search } = useLocation();

const parameters = new URLSearchParams(search);

const token = parameters.get('token');

React Router v6

Use useSearchParams

Example

const [searchParams] = useSearchParams();

useEffect(() => {
  const token = searchParams.get('token');
  console.log(token);
}, [searchParams]);