React.js przekazuje parametry, gdy router nie jest w adresie URL

Wspomniany link opisuje dwie różne strategie. Po pierwsze, segmenty dynamiczne to po prostu sparametryzowane adresy URL, w których parametry są przekazywane jako część ścieżki adresu URL, a nie w ciągu zapytania. Muszą więc być publicznie widoczne.
Po drugie, możesz użyć rekwizytów. Jest to jedyna obsługiwana opcja przekazywania rzeczy „za kulisami”. jest to również preferowana metoda w React. Pytanie brzmi, gdzie to się może zdarzyć?
Jedną z opcji jest przekazanie wartości na najwyższym poziomie z poziomu

Router.run ()

. Jest to opisane w powyższym linku, gdzie każdy zagnieżdżony program obsługi przekazuje właściwości jawnie jako

& < RouteHandler search = {this.props.search}/& >

lub zbiorczo, używając

rozpowszechnianie atrybutów
http://facebook.github.io/reac ... .html
na przykład

& < RouteHandler {... props}/& >

.
Ponieważ chcesz, aby tak się stało tylko dla podzbioru stron, możesz użyć zagnieżdżonych tras, w których nadrzędny program obsługi tras jest właścicielem danych właściwości w ramach swojego stanu. Następnie przekaże je każdemu dziecku jako zwykłe rekwizyty w taki sam sposób, jak w powyższym przypadku.
Na przykład mapa trasy może wyglądać następująco:

<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>

Wtedy Twój składnik RealEstatePrefiltered może wyglądać następująco:

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

 ;

 }

});

Pozostaje tylko jedno pytanie: jak zmienić stan tego komponentu? Możesz użyć do tego repozytorium Flux lub po prostu skonfigurować globalne wydarzenie i sprawić, by ten komponent obserwował zmiany.

możesz użyć stanu w historii w ten sposób

history.push({

 pathname: '/about',

 search: '?the=search',

 state: { some: 'state' }

})

W pierwszym komponencie możesz wywołać ten link lub przyciski

onCick

browserHistory.push({

 pathname: `/about`,

 search : 'search'

 state: {

 type: 'type'

 }

});

W drugim komponencie możesz teraz pobrać je na przykład:

constructor(props) {

 super(props);

 this.state = {

 search: props.location.search,

 type: props.location.state.type

 }

}