React Router Abfrageparameter

Question

Ich habe eine React-Anwendung, die react-router v2.4 verwendet. Ich habe eine Route wie so definiert:

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

Wesentlichen diese Route eine Aktion löst einige Objekte von einer API, die dann in einem tabellarischen Format gerendert werden zu holen. Ich möchte, dass diese Tabelle durchsuchbar, sortierbar und paginiert ist, und ich denke, es wäre angemessen, den Status der Tabelle in der URL als Abfrageparameter zu speichern, so dass sie aktualisiert werden kann und die Funktionalität des Browsers nicht unterbrochen wird.

Um meine Tabellenkomponente zu aktualisieren, mache ich einen Anruf zu browserHistory mit einem URI ähnlich wie diese (die Abfrageparameter beachten):

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

Dies ist jedoch nicht ausgelöst react-router in die Route zu denken hat aktualisiert, da der Rückruf onEnter nie ausgelöst wird, obwohl der Browserverlauf mit der neuen Abfragezeichenfolge aktualisiert wird. Ich denke, ich verstehe, warum das passiert; Da die Abfragezeichenfolge nicht Teil der definierten Route ist, nehme ich an, dass das Paket die Änderung nicht übernehmen wird.

Gibt es eine Möglichkeit react-router mit Abfrageparametern wie diesem zu verwenden oder muss ich meine Filter Teil der URI machen?

Answer 1

Need onChange in der Routendefinition verwenden - onEnter wird das erste Mal, wenn Sie eine Route Hit- und onChange wird aufgerufen, wenn die Routenstatusänderungen:

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