具有参数的匹配路由不适用于react-router v4

Question

<Route path='/change-password/?resetToken=(:token)' component={()=><h1>testing</h1>} />

Above route don't render when I hit the url below?

http://localhost:3000/change-password/?resetToken=123

I also tried path='/change-password/?resetToken=:token'

Answer 1

So the main problem seems to be with the question mark in the path . But first you need to write :token instead of (:token) , here is an example format of path with params on github docs of the react-router .

I followed this github post about no way to set reserved characters in the path name, but it didn't lead me to anything. One way you could solve the problem is to define your route like /change-password and then in the actual component do this.props.location.search.split("=")[1] to get the value of the token from the search query. Here is an example:

class ChangePassword extends React.Component {
  componentDidMount() {
    // get the token, check if it exists and do smth with it if it does
    console.log(this.props.location.search.split("=")[1]);
  }
  render() {
    return (<h1>Change password</h1>);
  };
}
const App = () => (
  <Router>
    <div>
      <Route path='/change-password' component={ChangePassword} />
      <Route path='/home' component={ChangePassword} />
    </div>
  </Router>
);

It seems that react-router doesn't handle ? (or other reserved characters, haven't tested) in the path name, or I am seriously missing out something here and there is some magic option that makes it work :) I didn't find one but I made a working example with the code I provided on codesanbdbox with your path in the Route .