は、ルータに反応 - バウンドコンポーネント

Question

の外にルート小道具を取得し、私はいくつかのルートが定義されて：あなたが見ることができるように

render((
    <Router history={hashHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={IndexContainer} /> 
      <Route path="/agence" headerWhite={true} component={AgencyContainer} /> 
     </Route> 
    </Router> 
), document.getElementById('app')); 

が、私は/agenceルート上の小道具headerWhite={true}を持っています。私はAgencyContainerのコンポーネントでthis.props.route.headerWhite経由でアクセスできます。しかし、私が欲しいのは、私のAppコンポーネントでそれにアクセスできることです。それを行う簡単な方法はありますか？

私が達成したいのは、それがウェブサイトのすべてのページになければならないので、AppコンポーネントにレンダリングされるHeaderコンポーネントにheaderWhite小道具を渡すことです。

ありがとうございました。

Answer 1

私は、次の操作を行って問題を解決：

import React from 'react'; 
import Page from './Page'; 
import Header from './Header'; 

function getCurrentRoute(router, routes) { 
    const currentRoute = routes.filter(route => route.path && router.isActive(route.path, true)); 

    return currentRoute[0]; 
} 

function App(props, context) { 
    const currentRoute = getCurrentRoute(context.router, props.routes); 

    return (
     <Page> 
      <Header headerWhite={currentRoute.headerWhite} /> 
      {props.children} 
     </Page> 
    ) 
} 

App.contextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 

export default App; 

はまだ、それは私の問題を解決しますが、私はそれを行うには良い方法があることを知りません。だから誰かがより良い解決策を持っているなら、それを与えてください。私はあなたの答えを受け入れます！