React Router 4.1.1 将标头组件放在其他所有组件中，无需导入

Question

我正在尝试从反应路由器网站https://reacttraining.com/react-router 查找文档，但我似乎无法找到在 4.1.1 中使用嵌套路由的解决方案。例如，在旧版本的 React Router 中，您可以像这样嵌套 Routes：

<Router history={history}>
    <Route exact path="/" component={App}>
        <Route path="/cards" component={Example} />
    </Route>
</Router>

这使用了 {this.props.children} 并使得在整个应用程序中存在诸如导航栏之类的静态组件变得容易，而无需在每个组件中导入它。

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                    <main>{ this.props.children }</main>
                <Footer/>
            </div>
        );
    }
}

如何在 4.1.1 版中出现类似的行为。我不想在组件中一直导入header组件。

我目前正在使用，但它似乎没有完成我想要做的事情。

    <Router history={history}>
        <Switch>
            <Route exact path="/" component={App}>
                <Route path="/cards" component={Example} />
            </Route>
        </Switch>
    </Router>

Answer 1

在 v4 中实际上要容易得多，因为 <Route /> 只是普通组件，就像其他任何组件一样。无需使用props.children，您可以将您的路线准确地放在您需要匹配组件渲染的位置。以下等效于您的 v3 示例：

<Router>
  <div>
    <Header />
    <main>
      <Route exact path="/" component={HomePage} />
      <Route path="/cards" component={Example} />
    </main>
    <Footer />
  </div>
</Router>

更新答案以包含“索引”路径。