React 和 Material-UI：如何构建具有多个页面的应用程序

Question

我正在使用 Meteor、React 和 Material-UI 创建一个应用程序。为简单起见，假设应用程序有两个页面：主页和用户。

两个页面应该有相同的布局：左边是一个带有汉堡菜单的 AppBar，右边是一个 IconMenu。选择汉堡菜单时，会从左侧滑出抽屉，选择右侧菜单时，会出现下拉菜单。

出于我的目的，抽屉菜单是静态的，即菜单条目不会根据正在显示的页面（主页或用户）而改变。但是，右侧的下拉菜单会根据处于活动状态的页面而变化，即它是上下文相关的。

我的问题是：在构建这个方面我有哪些选择？

我认为一种选择是创建两个页面组件，例如HomePage 和 UserPage，并使用例如MyAppBar 和 MyDrawer，以及特定页面应包含的任何内容。然后每个页面将负责在下拉菜单上创建菜单项并将它们传递给 MyAppBar，然后将呈现整个页面。

我相信这会解决问题，但我不确定是否有更好的方法。例如，是否有第二种方法，我可以只更新页面的内容组件并让拥有组件（例如 ApplicationPage 组件）查询内容组件（例如 HomeContent 或 UserContent）以获取下拉菜单的条目和当内容组件发生变化时设置下拉菜单？还有其他选择吗？

我正在使用 React Router 为 /home 和 /user 进行路由，因此上述内容也必须符合。

Answer 1

我为此使用了 react 路由器。

  <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。