How to make a good template engine?

Question

React

Hello everyone
, I started to slowly learn React to write a small project, the following question arose: I have a header, a footer, there are n (let it be 5) links for navigating the site, while the content on each page is different, but the style, footer, header , logo and other goodies are the same. Duck, please tell me the best practice of organizing a template engine on react to generate pages

Answer 1

If the layout is the same on every route:

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

in the Main component, place the Switch with the routes.
It may be different on different pages. Then you can make containers for content:

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

and wrap the page code in it:

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

and in the main component, place the Switch with routes.
The Router component is best positioned above the entire application:

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