React.js URLにないルータでパラメータを渡す

Question

こんにちは、あるページから別のページに移動して、パラメータをsearchとtypeに渡したいとします。これらのパラメータがURLにない反応ルータでこれを達成できますか？

私はこのhttps://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segmentsと解決策を探していますが、<RouteHandler {...this.props}/>を使用していますが、uramsにparamsを渡すまで機能していません。

解決策はありますか？

EDIT 1.ルート：あなたが言及した

<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

リンクが2つの異なる戦略を概説します。まず、動的セグメントはパラメータ化されたURLにすぎず、パラメータはクエリ文字列ではなくURLパスの一部として送信されます。したがって、これらは公開される必要があります。

第2に、小道具を使用できます。これは、「舞台裏で」物事を伝えるために唯一サポートされているオプションです。さらに、それはReactの好ましい方法です。問題は、どこが起こるのだろうか？

1つのオプションは、トップレベルの値をRouter.run()から渡すことです。これは上のリンクで概説されています。入れ子になった各ハンドラは、<RouteHandler search={this.props.search} />のように明示的に、あるいはのようにspread attributesを使用して小道具を渡します。

ページのサブセットでのみ発生したいので、親ルートハンドラがその状態の一部として問題のプロパティを所有するネストされたルートを使用できます。上記の場合と同じ方法で通常の小道具としてそれらをすべての子供に渡すだけです。

たとえば、あなたのルートマップは次のようになります。

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

次に、あなたのRealEstatePrefilteredコンポーネントは次のようになります。左

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

唯一の問題は、あなたが状態を変更する方法であり、このコンポーネントの？このためにFluxストアを使用することもできます。グローバルイベントを設定し、このコンポーネントで変更を監視することもできます。