Как сделать так, чтобы у на одной странице менялось только содержимое в зависимости от роутера?

Question

[Mirrrta]

Есть внутренняя страница:

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

Нужно, чтобы у компонентов My и Payments были одинаковые хедер и футер, не хочется дублировать код.

Answer 1

[paoluccio]

Можно так:

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>
);