React Router 查询参数

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 中获取一些对象，然后以表格格式呈现这些对象。我希望这个 table 可以搜索、排序 table 和分页，我认为将 table 的状态存储在 URL 中作为查询参数是合适的，所以它可以刷新并且浏览器 back/forward 功能没有被破坏。

为了更新我的 table 组件，我使用类似于此的 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
           ));
       }}
/>

React Router 查询参数

React Router Query Parameters

javascript

url

query-string

reactjs

react-router