React и Material-UI: как структурировать приложение с несколькими страницами

Я использую Meteor, React и Material-UI для создания приложения. Для простоты предположим, что приложение имеет две страницы: домашнюю и пользовательскую.

Обе страницы должны иметь одинаковый макет: AppBar с гамбургер-меню слева и IconMenu справа. Когда выбрано гамбургерное меню, ящик выдвигается слева, а когда выбрано правое меню, появляется раскрывающееся меню.

Для моих целей меню ящика является статическим, т.е. записи меню не меняются в зависимости от того, какая страница (домашняя или пользовательская) отображается. Однако раскрывающееся меню справа будет меняться в зависимости от того, какая страница активна, то есть зависит от контекста.

У меня вопрос: какие у меня есть варианты создания этого?

Я думаю, что один из вариантов - создать два компонента страницы, например. HomePage и UserPage и составьте каждую, используя, например, MyAppBar и MyDrawer, а также любое содержимое, которое должна содержать конкретная страница. Затем каждая страница будет отвечать за создание пунктов меню в раскрывающемся меню и передачу их в MyAppBar, после чего будет отображаться вся страница.

Я считаю, что это решит проблему, но я не уверен, что есть способ лучше. Например, есть ли второй подход, при котором я мог бы обновить только компонент содержимого страницы и заставить компонент-владелец (например, компонент ApplicationPage) запрашивать компонент содержимого (например, HomeContent или UserContent) для записей раскрывающегося меню и установить раскрывающееся меню при изменении компонента содержимого? Есть другие варианты?

Я использую React Router для маршрутизации для / home и / user, поэтому приведенное выше также должно соответствовать этому.


reactjs material-ui meteor-react
person kaared    schedule 17.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для этого я использую реагирующий роутер.

  <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 формируют более подробную информацию.

person Marc Palm    schedule 20.06.2016