react-router-nested-routes-simple.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>
);

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

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