Question

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

当我点击下面的网址时，上面的路线不会渲染？

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做了一个工作示例。

具有param的匹配路由不能与react-router v4一起使用

1 个答案: