React.js przekazać parametry z routera nie w URL

Question

Witam Chcę przejść z jednej strony na drugą i przekazać parametry search i type. Czy mogę to osiągnąć, reagując na router bez tych parametrów w adresie URL?

Szukam tego https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments i rozwiązań przy użyciu <RouteHandler {...this.props}/>, ale nie działa, dopóki nie przekazuję params do adresu URL.

Czy jest na to jakieś rozwiązanie?

EDIT 1. Trasy:

<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

Link wspomniałeś przedstawiamy dwie różne strategie. Po pierwsze segmenty dynamiczne to sparametryzowane adresy URL, w których parametry są przesyłane jako część ścieżki URL zamiast w ciągu zapytania. Więc te będą musiały być widoczne publicznie.

Po drugie, możesz użyć rekwizytów. Jest to jedyna obsługiwana opcja przekazywania rzeczy "za kulisami". Ponadto jest to preferowana metoda w React. Pytanie brzmi, gdzie to może się stać?

Jedną z opcji jest przekazanie wartości na najwyższym poziomie, z poziomu Router.run(). Jest to opisane w powyższym łączu, z każdym zagnieżdżonym przewodnikiem przekazującym rekordy w dół, jawnie, na przykład <RouteHandler search={this.props.search} /> lub hurtowo przy użyciu spread attributes, jak <RouteHandler {...props} />.

Ponieważ zależy to tylko na podzbiorze stron, można użyć tras zagnieżdżonych, w których macierzysty program obsługi trasy jest właścicielem właściwości, o których mowa, w ramach jego stanu. Po prostu przekazałby je każdemu dziecku jako normalne rekwizyty w taki sam sposób, jak w powyższym przypadku.

Na przykład, 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 RealEstatePrefiltered komponent 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} /> 
     </div>; 
    } 
}); 

Pytanie tylko lewica, jak można zmienić stan na tym komponencie? Można do tego celu użyć magazynu Flux lub po prostu skonfigurować globalne wydarzenie i zwrócić uwagę tego składnika na zmiany.