React.js passa i parametri con il router non nell'URL

Question

Ciao Voglio spostarmi da una pagina all'altra e passare i parametri search e type. Posso ottenere questo risultato con il router di risposta senza questi parametri nell'URL?

Sto osservando questo https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments e le soluzioni utilizzando <RouteHandler {...this.props}/> ma non funziona finché non ho passato i parametri all'URL.

Esiste una soluzione?

EDIT 1. Percorsi:

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

Answer 1

Il link che hai citato delinea le due diverse strategie. Innanzitutto, i segmenti dinamici sono solo URL con parametri, in cui i parametri vengono inviati come parte del percorso URL anziché nella stringa di query. Quindi questi dovrebbero essere visibili pubblicamente.

In secondo luogo, è possibile utilizzare oggetti di scena. Questa è l'unica opzione supportata per far passare le cose "dietro le quinte". Inoltre, è il metodo preferito in React. La domanda è, dove può succedere?

Un'opzione è quella di passare i valori al livello superiore, da Router.run(). Questo è descritto nel link sopra, con ogni gestore annidato che passa gli oggetti di scena verso il basso, in modo esplicito, come <RouteHandler search={this.props.search} /> o all'ingrosso utilizzando spread attributes come <RouteHandler {...props} />.

Poiché si desidera solo che si verifichi per un sottoinsieme di pagine, è possibile utilizzare route nidificate, in cui il gestore della route principale possiede le proprietà in questione come parte del suo stato. Li avrebbe quindi passati a tutti i bambini come oggetti di scena normali nello stesso modo del caso precedente.

Ad esempio, la mappa del percorso potrebbe essere simile a questo:

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}> 
     <Route name="homes" handler={RealEstateHouseDetails}/> 
     <Route name="apartments" handler={RealEstateHouseDetails}/> 
     <Route name="land" handler={RealEstateLandDetails}/> 
    </Route> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

Poi il componente RealEstatePrefiltered potrebbe assomigliare a questo:

RealEstatePrefiltered = React.createClass({ 
    getInitialState: function() { 
     return { search: '', type: '' }; // Update from store or event. 
    }, 
    render: function() { 
     return <div> 
      <RouteHandler search={this.state.search} type={this.state.type} /> 
     </div>; 
    } 
}); 

L'unica domanda a sinistra è, come si fa a cambiare lo stato su questo componente? Potresti utilizzare un negozio Flux per questo, oppure potresti semplicemente impostare un evento globale e fare in modo che questo componente cerchi le modifiche.