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
           ));
       }}
/>

反应路由器查询参数

1 个答案: