javascript - React Router 4 嵌套路由不在 Props 中

Question

我正在构建一个NavigationController在每个页面上使用相同导航栏（称为 ）的 web 应用程序。所以我试图让 React Router 做这样的事情：

<BrowserRouter>
  <Switch>
     <Route path='/' component={NavigationContainer}>
         <Route exact path='/path1' component={Comp1} />
         <Route exact path='/path2' component={Comp2} />
         <Route exact path='/path3' component={Comp3} />
     </Route>
  </Switch>
</BrowserRouter>

这样导航栏就不必在用户导航到另一个页面时重复呈现。但是，这似乎不起作用。我没有看到传入的子组件的任何道具（我想做这样的事情NavigationController：

render() {
    ...
    return (
        <div>
            //Nav bar UI goes here
            {this.props.children} // Ideally, Comp1/2/3 should be rendered here
        </div>
    );
}

推荐的实现方式是什么？我错过了什么吗？

标签： javascriptreactjsreact-routerreact-router-v4react-router-dom