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

【问题标题】：match route that has param doesn't work with react-router v4具有参数的匹配路由不适用于 react-router v4
【发布时间】：2018-06-15 23:56:17
【问题描述】：

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

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

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

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

【问题讨论】：

尝试将<h1>testing</h1 包装成return 并将您的案例与path='/change-password/?resetToken=:token' 一起使用
似乎问题出在resetToken 之前的问号，here 是关于 SO 的类似问题，没有答案。我试过了，它在没有? 标志的情况下工作，你能改变你的路线，让它像/change-password/resetToken=:token 一样，还是你必须保留? 那里？
我希望这就是你想要的stackoverflow.com/questions/35604617/…

标签： javascript reactjs ecmascript-6 react-router

【解决方案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 上提供的代码和Route 中的path 做了一个工作示例。

【讨论】：