React和Material-UI：如何構建具有多個頁面的應用程序

我使用Meteor，React和Material-UI來創建應用程序。爲了簡單起見，我們假設應用程序有兩個頁面：家庭和用戶。React和Material-UI：如何構建具有多個頁面的應用程序

這兩個頁面應該有相同的佈局：一個AppBar，左邊是漢堡包菜單，右邊是IconMenu。當選擇漢堡包菜單時，抽屜將從左側滑出，當選擇右側菜單時，將出現一個下拉菜單。

出於我的目的，抽屜菜單是靜態的，即菜單條目不會根據顯示的頁面（家庭或用戶）而改變。然而，右側的下拉菜單將根據哪些頁面處於活動狀態而變化，即它是上下文相關的。

我的問題是：我有什麼選擇建設呢？

我認爲一種選擇是創建兩個頁面組件，例如，主頁和用戶頁面，並使用例如MyAppBar和MyDrawer，以及特定頁面應包含的任何內容。然後，每個頁面將負責在下拉菜單上創建菜單項並將它們傳遞給MyAppBar，然後將呈現整個頁面。

我相信這會解決問題，但我不確定是否有更好的方法。例如，是否有第二種方法可以只更新頁面的內容組件，並讓擁有組件（例如ApplicationPage組件）查詢內容組件（例如HomeContent或UserContent）以查找下拉菜單的條目並有內容組件更改時設置下拉菜單？任何其他選項？

我正在使用React路由器爲/ home和/ user進行路由，因此上述內容也必須符合這一點。

來源

2016-06-17 kaared

爲此我使用了react路由器。

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

在Template App中，我們可以使用this.props.main和this.props.sidebar作爲變量。

請看https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js表格更多詳情。

來源

2016-06-20 12:34:53

React和Material-UI：如何構建具有多個頁面的應用程序

回答

相關問題