反応ルータのコンポーネントのパラメータを指定する方法は？

Question

私は最近React-routerを使用していますが、直感的ではないことがわかりました。 私の場合です。私は、 "headerBar"コンポーネントと "children"コンポーネントを含む2つのパラメータを持つステートレスなReactコンポーネント "MainLayout"を定義しました。

mainlayout.js：

const MainLayout = ({children,headerBar})=>{ 
    return (
    <div className="app"> 
     {headerBar} 
     <main> 
     {children} 
     </main> 
    </div> 
); 
} 
export default MainLayout; 

私のルートは、このようなものです：のルートに "headerBar" を指定するような場合には

export default (
    <Router history={browserHistory}> 
    <Route component={MainLayout}> -----> how to specify "headerBar" 
     <Route path="/" component={Home} /> 

     <Route path="widgets"> 
     <Route component={SearchLayout}> 
      <IndexRoute component={WidgetList} /> 
     </Route> 
     </Route> 

    </Route> 
    </Router> 
); 

、どのように：

routes.js "MainLayout"？

おかげ

デレク

Answer 1

ルータを反応させることで、あなたはサブルートで複数のコンポーネントを宣言することができます。この機能はNamed Componentsと呼ばれています。

このトピックでは、あまりにもここで扱われてきた：Using React-Router with a layout page or multiple components per page

あなたが書くべき気にいらないよう：

<Route path="/" components={{body: Home, header: HeaderBar}} /> 

と

const MainLayout = ({body,header})=>{ 
    return (
    <div className="app"> 
     {header} 
     <main> 
     {body} 
     </main> 
    </div> 
); 
} 

よろしく