React.js übergeben Parameter mit Router nicht in URL

Question

Hallo Ich möchte von einer Seite zu einer anderen wechseln und übergeben Parameter search und type. Kann ich dies mit react Router ohne diese Parameter in der URL erreichen?

Ich sehe dies https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments und die Lösungen mit <RouteHandler {...this.props}/> aber es funktioniert nicht, bis ich Parameter an die URL übergeben.

Gibt es eine Lösung dafür?

EDIT 1. Routen:

<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

Der Link, den Sie die beiden unterschiedlichen Strategien erwähnt skizziert. Erstens sind dynamische Segmente nur parametrisierte URLs, bei denen Parameter als Teil des URL-Pfads anstatt in der Abfragezeichenfolge gesendet werden. Diese müssten also öffentlich sichtbar sein.

Zweitens können Sie Requisiten verwenden. Dies ist die einzige unterstützte Möglichkeit, Dinge "hinter die Kulissen" zu übertragen. Außerdem ist es die bevorzugte Methode in React. Die Frage ist, wo kann das passieren?

Eine Option besteht darin, die Werte auf oberster Ebene von Router.run() zu übergeben. Dies wird im obigen Link beschrieben, wobei jeder verschachtelte Handler die Props entweder explizit wie <RouteHandler search={this.props.search} /> oder im Großhandel unter Verwendung von spread attributes wie <RouteHandler {...props} /> weiterleitet.

Da dies nur für eine Teilmenge von Seiten möglich sein soll, können Sie verschachtelte Routen verwenden, bei denen der Parent-Route-Handler die betreffenden Eigenschaften als Teil seines Status besitzt. Es würde sie dann wie normale Requisiten an jedes Kind als normale Requisiten weitergeben.

Zum Beispiel Ihre Routenkarte könnte wie folgt aussehen:

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

Dann wird Ihr RealEstatePrefiltered Komponente könnte wie folgt aussehen:

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

Die einzige Frage bleibt, wie Sie den Zustand ändern auf dieser Komponente? Sie können hierfür einen Flux-Speicher verwenden oder Sie können einfach ein globales Ereignis einrichten und diese Komponente nach Änderungen suchen lassen.