使用 React Router 根据查询参数重新加载具有状态的路由

IT技术 javascript reactjs react-router
2021-05-27 23:08:19

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

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

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

这是一个有效的解决方案,但它非常笨拙。

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

有更好的解决方案吗?

1个回答

您可以使用componentWillReceiveProps组件的方法来检查查询参数的更改。

// AppRoute.js
componentWillReceiveProps(nextProps) {
   if (this.props.location.query.page !== nextProps.location.query.page) {
      // handle query parameter change here
   }
}