React RouterのReactコンポーネントのインスタンスをインポートで作成する

Question

同じコンポーネントを使用するようにしていますが、ルートに応じて別のコンポーネントを渡そうとしています。

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Router, Route, IndexRoute, hashHistory } from "react-router"; 

import Layout from "./pages/Layout"; 
import ApplicantsContainer from "./pages/ApplicantsContainer"; 
import Filtered from "./pages/Filtered"; 
import ApplicantStore from "./stores/ApplicantStore"; 

const app = document.getElementById('app'); 
ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <IndexRoute/> 
     <Route path="new" component={ApplicantsContainer} getData={ApplicantStore.getNew.bind(ApplicantStore)}/> 
     <Route path="prescreen" component={ApplicantsContainer} getData={ApplicantStore.getPrescreen.bind(ApplicantStore)}/> 
     <Route path="interview" component={ApplicantsContainer} getData={ApplicantStore.getInterview.bind(ApplicantStore)}/> 
     <Route path="offer" component={ApplicantsContainer} getData={ApplicantStore.getOffer.bind(ApplicantStore)}/> 
     <Route path="hired" component={ApplicantsContainer} getData={ApplicantStore.getHired.bind(ApplicantStore)}/> 
     <Route path="declined" component={ApplicantsContainer} getData={ApplicantStore.getDeclined.bind(ApplicantStore)}/> 
     <Route path="filtered" component={Filtered}/> 
    </Route> 
    </Router>, 
app); 

問題は、すべてのルートがコンポーネントの同じインスタンスを受け取り、最初のgetDataプロップのみを使用することです。 ApplicantsContainerコンポーネントの別のインスタンスを宣言するにはどうすればいいですか？

Answer 1

あなたはいつも<Router/>

例えば外部の新しいコンポーネントを作成することができますお使いのバージョン

<Route path="new" component={ApplicantsContainer} 
    getData={ApplicantStore.getNew.bind(ApplicantStore)}/> 
<Route path="prescreen" component={ApplicantsContainer} 
    getData={ApplicantStore.getPrescreen.bind(ApplicantStore)}/> 

は

// Assume getData is a prop you need to set in ApplicantsContainer 
const ApplicantsContainerForNew = (
    <ApplicantsContainer 
    getData={ApplicantStore.getNew.bind(ApplicantStore)} 
    /> 
) 

const ApplicantsContainerForPrescreen = (
    <ApplicantsContainer 
    getData={ApplicantStore.getPrescreen.bind(ApplicantStore)} 
    /> 
) 
... 

<Route path="new" component={ApplicantsContainerForNew}/> 
<Route path="prescreen" component={ApplicantsContainerForPrescreen} />