react-router-hoc-layout.jsx

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

// Layout
const Layout = ({ children }) => (
  <div>
    <header>My header</header>
    {children}
    <header>My footer</header>
  </div>
);

// HOC
const withLayout = (Component) => (props) => (
  <Layout>
    {/* All props are passed through to the Component being wrapped */}
    <Component {...props} /> /
  </Layout>
);

// Pages
const PageA = withLayout(() => <p>This is Page A</p>);
const PageB = withLayout(() => <p>This is Page B</p>);

// Routes
export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/pageA" component={PageA} />
        <Route path="/pageB" component={PageB} />
      </Switch>
    </Router>
  );
}

Thanks!