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>

编辑

注意！正如评论（和其他答案）所述，这对 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>
    );
  }

React Router v4 不渲染父组件

React Router v4 not rendering parent components

javascript

nested

reactjs

react-router

react-router-dom