反應路由器查詢參數

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