What's the best way to create a page template in React?

Question

Basically I want to include a header, sidebar and footer to each page. I've currently got the above mentioned on each individual page with react router clicking through to each of them. I want to down size my code and have one main template that allows each main section of each page to be unique with the header, footer and sidebar nav in place. What's the best place to add this? Tried in the App.js and index, but doesn't seem to like that.

I'm using antd as my main framework.

Thanks in advance!

 ReactDOM.render((
   <div>
     <Layout>
       <Sider>
         <SideMenu />
       </Sider>
       <Layout>
         <Header />
         <Content style={{ margin: '0 16px' }}>
           <div className='appWrap'>
             <BrowserRouter>
               <LocaleProvider locale={enUS}>
                 <App />
               </LocaleProvider>
             </BrowserRouter>
             <Footer />
           </div>
         </Content>
       </Layout>
     </Layout>
   </div>
), document.getElementById('root'));

Something along the lines of this. I want the template to load around the main App.js I've seen using router to create separate templates won't save me on code as it's what I pretty much have already.

Answer 1

I'm currently using a similar approach by creating a custom component that passes the props to the Route component:

routes.jsx:

import React, { Fragment } from 'react';
import {
  BrowserRouter as Router,
  Switch
} from 'react-router-dom';
import LayoutDefault from './views/layouts/LayoutDefault';
import Startpage from './views/Startpage';

const Routes = () => (
  <Router>

    <Switch>
      <LayoutDefault exact path="/dashboard" component={Startpage} />
      // ... more routes
    </Switch>

  </Router>
);

export default Routes;

And LayoutDefault.jsx

import React, { Fragment } from 'react';
import { Route } from 'react-router-dom';
import LoggedinMenu from 'modules/Menu/LoggedinMenu';

const LayoutDefault = (props) => (
  <Fragment>
    <LoggedinMenu />
    <Route {...props} />
  </Fragment>
);

export default LayoutDefault;