How to make it so that on one page only the content changes depending on the router?

Question

JavaScript

There is an inner page

<Switch>
<Route path={'/my'} component={My} />
<Route path={'/payments'} component={Payments} />
...
</Switch>

It is necessary that the My and Payments components have the same header and footer, I do not want to duplicate the code.

Answer 1

It is possible like this:

const PageLayout = ({ children }) => (
  <React.Fragment>
    <header>Header</header>
    {children}
    <footer>Footer</footer>
  </React.Fragment>
);

const Page = () => (
  <PageLayout>
    <Switch>
      <Route path='/my' component={My} />
      <Route path='/payments' component={Payments} />
    </Switch>
  </PageLayout>
);