React 路由器查询参数

Question

我有一个使用 react-router v2.4 的 React 应用程序。我有这样定义的路线：

<Router history={this.props.history}>
    <Route path="/:organisationId/objects"
           component={ObjectsPage}
           onEnter={(state) => {
               this.props.dispatch(objectsFetch(
                   state.params.organisationId,
                   state.location.query
               ));
           }}
    />
</Router>

本质上，此路由调度一个动作以从 API 获取一些对象，然后以表格格式呈现。我希望这个表是可搜索的、可排序的和分页的，我认为将表的状态作为查询参数存储在 URL 中是合适的，这样它就可以被刷新并且浏览器的后退/前进功能不会被破坏。

为了更新我的表格组件，我使用与此类似的 URI 调用 browserHistory（注意查询参数）：

browserHistory.push('/0f08ac61-ddbd-4c73-a044-e71b8dd11edc/objects?page=2&search=query&sort=firstname|desc');

但是，这不会触发 react-router 认为路由已更新，因为即使浏览器历史记录已使用新查询字符串更新，也不会触发 onEnter 回调。我想我明白为什么会这样；由于查询字符串不是已定义路由的一部分，我猜包不会接受更改。

有没有办法将react-router 与这样的查询参数一起使用，还是我必须让我的过滤器成为 URI 的一部分？

Answer 1

需要在路由定义中使用onChange——onEnter在你第一次命中路由时被调用，onChange在路由状态改变时被调用：

<Route path="/:organisationId/patients"
       component={PatientsPage}
       onEnter={(state) => {
           this.props.dispatch(patientsFetch(
               state.params.organisationId,
               state.location.query
           ));
       }}
       onChange={(state) => {
           this.props.dispatch(patientsFetch(
               state.params.organisationId,
               state.location.query
           ));
       }}
/>