反应路由器中一个组件中组件的内容

Question

我对反应堆路由器有一个不寻常的问题。请特别注意该应用程序的路由器。 这是我声明所有路由器的文件：

    import React from 'react';
import { Switch, Route } from 'react-router-dom';

...

      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/register" component={RegisterPage} />
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/app" component={Header} />
        <Route exact path="/app/dashboard" component={DashboardPage} />
        <Route exact path="/app/payment" component={PaymentPage} />
      </Switch>
...

现在，我希望DashboardPage和PaymentPage组件显示在Header组件中，而不是显示为一个全新的页面。

    <Link to="/app/dashboard">
<MenuItem>...</MenuItem>
    </Link>
    <Link to="/app/payment">
<MenuItem>...</MenuItem>
    </Link>

<main>
  <DashboardPage /> // display DashboardPage component's content here, when I choose this router.
  <PaymentPage /> // display PaymentPage component's content here, when I choose this router.
</main>