Как сделать хороший шаблонизатор?

Question

[nano_e_t_4]

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

Answer 1

[Антон Спирин]

Если лайаут одинаковый на каждом маршруте:

render() {
  return(
    <Wrapper>
      <Header />
      <Main />
      <Footer />
    </Wrapper>
  );
}

в компоненте Main располагаете Switch с маршрутами.

Если на разных страницах он может быть разный. То можно сделать контейнеры для контента:

const MainPageLayout = ({ children }) => (
  <Wrapper>
    <Header />
    <PageContent>
      {children}
    </PageContent>
    <Footer />
  </Wrapper>
);

и оборачивать в него код страницы:

const SomePage = () => (
  <MainPageLayout>
    {/* page code */}
  </MainPageLayout>
);

а в главном компоненте расположить Switch с маршрутами.

Компонент Router лучше расположить над всем приложением:

<Provider>
  <Router>
    <App />
  </Router>
</Provider>

Comments

[nano_e_t_4]

спасибо, попробую