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

你需要把 venues 路线放在 dashboard

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

编辑

注意！正如 cmets（和其他答案）所说，这对 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 成为 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>
    );
  }