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
.
testing
– Sergey Jan 06 '18 at 09:46