ReactとMaterial-UI：複数のページでアプリケーションを構造化する方法

Question

私はMeteor、React、Material-UIを使ってアプリケーションを作成しています。簡単にするため、アプリには自宅とユーザーの2つのページがあるとします。

両方のページのレイアウトが同じである必要があります。左側にハンバーガーメニューを、右側にアイコンメニューを持つAppBarです。ハンバーガーメニューを選択すると、引き出しが左からスライドし、右メニューが選択されるとドロップダウンメニューが表示されます。

私の目的のために、ドロワーメニューは静止しています。つまり、表示されているページ（家またはユーザー）によってメニュー項目は変わりません。ただし、右のプルダウンメニューは、アクティブなページ、つまり状況依存のページに応じて変更されます。

私の質問は次のとおりです。これを構築するにはどのようなオプションがありますか？

1つのオプションは、2つのページコンポーネントを作成することです。ホームページとユーザページを作成し、それぞれを使用して作成する。 MyAppBarとMyDrawerに加えて、特定のページに含めるべき内容。各ページは、メニュー項目をドロップダウンメニューに作成してMyAppBarに渡し、ページ全体をレンダリングします。

これは問題を解決すると信じていますが、より良い方法があるかどうかはわかりません。たとえば、ページのコンテンツコンポーネントだけを更新して、所有コンポーネント（ApplicationPageコンポーネントなど）がコンテンツコンポーネント（HomeContentやUserContentなど）にドロップダウンメニューのエントリを照会できるようにする第2の方法があります。コンテンツコンポーネントの変更があるときにドロップダウンメニューを設定しますか？その他のオプションは？

私はReact Routerを使って/ homeと/ userのルーティングを行っていますので、上記もそれに適合しなければなりません。

Answer 1

私はこの目的のために反応ルータを使用します。

<Router history={browserHistory}> 
    <Route component={App}> 
     <Route path='/login/' components={{main: Login}} /> 
     <Route path='/confirm' 
       components={{ 
           main: Confirm, 
           sidebar:Sidebar 
          }} 
      /> 
    </Route> 
    </Router> 

テンプレートアプリケーションでは、変数としてthis.props.mainとthis.props.sidebarを使用できます。

詳細はhttps://github.com/reactjs/react-router/blob/master/examples/sidebar/app.jsフォームをご覧ください。