带有参数的匹配路由不能与react-router v4一起工作

Question

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

当我点击下面的url时，上面的路由不会呈现吗？

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

我也尝试过path='/change-password/?resetToken=:token'

Answer 1

所以主要的问题似乎是path中的问号。但首先你需要编写:token而不是(:token)，here是path的一个示例格式，在react-router的github文档中带有参数。

我关注了this github关于没有办法在路径名中设置保留字符的帖子，但它没有引导我找到任何东西。解决这个问题的一种方法是像/change-password这样定义路由，然后在实际组件中执行this.props.location.search.split("=")[1]，从搜索查询中获取令牌的值。下面是一个示例：

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

react-router似乎不能处理路径名中的? (或其他保留字符，尚未测试)，或者我在这里严重遗漏了一些东西，有一些神奇的选项可以让它工作:)我没有找到一个，但我用我在codesanbdbox上提供的代码和你的path在Route中做了一个工作示例。