反应路由器查询参数

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