使用React Router

Question

我有一个根据查询参数在构造函数中设置状态的路由。由于React Router没有基于查询参数进行路由的选项，即使查询参数发生变化，React Router也会将其视为相同的路由。

例如，React Router将http://example.com/和http://example.com/?page=2视为相同的路由。如果我从第二页重定向到第一页，构造函数不会再次运行。但是，我需要再次运行构造函数来重置状态。

有没有办法强制React Router重新加载路由？

这是一个有效的解决方案，但它非常hacky。

function redirect(path) {
  browserHistory.push('/fake-path');
  setTimeout(_ => {
    browserHistory.replace(path);
  }, 0);
}

...


<Router history={browserHistory}>
  <Route path="/" component={AppRoute}>
    <IndexRoute component={HomeRoute}/>
    ...
    <Route path="fake-path" component={_ => null}/>
  </Route>
</Router>;

有更好的解决方案吗？

Answer 1

您可以使用组件的方法// AppRoute.js componentWillReceiveProps(nextProps) { if (this.props.location.query.page !== nextProps.location.query.page) { // handle query parameter change here } } 来检查查询参数更改。

header>container | section>container | footer>container