リアクタ・ルータ - ダイナミック・ルート - ルータを経由して状態オブジェクトにアクセスする

Question

TLDR： 私は2つのページ・アプリケーションから2つのページから状態オブジェクトにアクセスします。この段階でreduxに移る：P）。

Codepen is hereただし、ルーティングはcodepenでは機能しません。

リストページとクリックスルーページがあります。
詳細ページ（HolidayPage）がプッシュbrowserHistoryを使用して状態オブジェクトからオブジェクトのプロパティを使用してリンクされている -
<Route path="/:HolidayId" component={HolidayPage}/>
私はそれはの子ではないとして、このHolidayPageコンポーネントから状態オブジェクトにアクセスする方法を混乱していますルートアプリケーション（したがって、状態オブジェクトに隣接していない）は、このルートをプロパティとして状態オブジェクトに渡すことはできますか？

HolidayPageコンポーネントでは、特定のページの休日の詳細を出力するために状態オブジェクトにアクセスしたいと考えています。例えば、/holiday_2のルートはオブジェクトデータを-から表示します。

または{this.props.children}（as seen here）を使用してネストされたルートを使用してルートコンポーネントにコンポーネントを挿入した場合、状態オブジェクトのプロパティを挿入されたコンポーネントに渡す方法が混乱します。

ReactDOM.render((
<Router history={browserHistory} > 
    <Route path="/" component={MainLayout} /> 
    <Route path="/:HolidayId" component={HolidayPage}/>  
</Router> 
), document.getElementById('main')) 

そして、私はこのコードを使用してい動的ページに指示するために - -

gotoHoliday : function (e) { 
    e.preventDefault();    
    var HolidayId = this.props.index;  
    browserHistory.push(HolidayId);   
}, 

を

私のアプリはそうのような

holidays: { 
      holiday_1 : { 
       name : 'France', 
       details : 'Lorem ipsum dolor sit amet', 
      }, 
      holiday_2 : { 
       name : 'Italy', 
       details : 'Lorem ipsum dolor sit amet', 
      }, 
      holiday_3 : { 
       name : 'Spain', 
       details : 'Lorem ipsum dolor sit amet', 
      }, 
     } 

ルーティング設定の状態オブジェクトを持っています

休暇のページで私は{this.props.params.HolidayId}を使って休日のIDを表示することができますが、私はthの詳細を表示する方法がわかりませんHolidayIdオブジェクトです。

誰かが私を助けることができれば、本当に感謝しています！ :)

Answer 1

まず、あなたの状態はルート間で共有されているので、ルータの上の反応ツリーのどこかにその状態を保つ必要があります。覚えておいてください。このような何か：

var App = React.createClass({ 
    getInitialState: function() { 
    // return your holdays object 
    }, 

    render() { 
    return(
     <Router> 
     <Route path="/" component={MainLayout}/> 
     <Route path="/:HolidayId" component={HolidayPage}/>  
     </Router> 
    ) 
} 

次に、あなたがルートに小道具として休日情報を持っていたことができ

render() { 
    return(
    <Router> 
     <Route path="/" component={MainLayout} holidays={this.state.holidays} /> 
     <Route path="/:HolidayId" component={HolidayPage} holidays={this.state.holidays}/>  
    </Router> 
) 
} 

ReactRouterはルートハンドラへのルートの小道具を利用できるようになります。今度はMainLayoutとHolidayPageからthis.props.route.holidaysを介して状態を評価できます。 HolidayIdを指定した適切な休日を取得するには、HolidayPageコンポーネントにヘルパーを作成する必要があります。ような何か：

this.props.route.holidays['holiday_' + this.props.params.HolidayId] 

Answer 2

は状態オブジェクトへのご<HolidayPage />のアクセスを与え、ちょうどidでそれを見て。

var holidays = require ('./holidays.js'); 

class HolidayPage... { 
    render() { 
     return <div> 
      { holidays[ this.props.params.HolidayId} ].name } 
     </div>; 
    } 
}