React Router v4不呈现父组件

Question

我的路由设置如下（index.js）：

<BrowserRouter history={browserHistory}>
   <Switch>
      <Route exact path="/" component={RootContainer} />
      <Route exact path="/login" component={RedirectToApp(LoginPage)} />
      <Route exact path="/dashboard" component={RequiresAuth(AppContainer)} />
      <Route exact path="/dashboard/venues" component={VenuesPage} />
   </Switch>
</BrowserRouter>

在我的AppContainer中，我的组件写为：

render() {
    return (
      <div className='wrapper main-app-wrapper'>
        <Header toggleSidebar={this.toggleSidebar}>
          <AuthHeaderActions />
        </Header>
         <div className='content-wrapper'>
          {this.props.children}
        </div>
        <LeftMenu />
        <Footer />
      </div>
    );
  }

当我转到路线/ dashboard时，页眉，页脚和左侧菜单会正确呈现。

但是当我打到/ dashboard / venues路线时，仅呈现VenuesPage内部的内容。 页眉，页脚和左菜单未得到渲染。 路由嵌套有问题。 我正在使用react-router-dom-v4。

Answer 1

您需要将场地路线放置在仪表板中

<Route exact path="/dashboard" component={RequiresAuth(AppContainer)}>
    <Route exact path="/venues" component={VenuesPage}/>
</Route>

编辑

NB！ 由于评论（和其他答案）的状态，这对于V4不再有效。

Answer 2

您可以使用react-router v4在组件内添加Routes

您可以将路线更改为

index.js

<BrowserRouter history={browserHistory}>
   <Switch>
      <Route exact path="/" component={RootContainer} />
      <Route exact path="/login" component={RedirectToApp(LoginPage)} />
      <Route path="/dashboard" component={RequiresAuth(AppContainer)} />

   </Switch>
</BrowserRouter>

现在，您希望VenuesPage成为VenuesPage子AppContainer 。 您可以将其添加到AppContainer组件中，例如

render() {
    return (
      <div className='wrapper main-app-wrapper'>
        <Header toggleSidebar={this.toggleSidebar}>
          <AuthHeaderActions />
        </Header>
         <div className='content-wrapper'>
          {this.props.children}
          <Route exact path="/dashboard/venues" component={VenuesPage} />
        </div>
        <LeftMenu />
        <Footer />
      </div>
    );
  }