Javascript React路由器v4不呈现父组件

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

在我的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>
    );
  }

render（）{
返回(
{this.props.children}
);
}

当我转到路线/仪表板时，页眉、页脚和左侧菜单将正确呈现

但是，当我点击路线/仪表板/场地时，仅呈现VenuesPage中的内容。未呈现页眉、页脚和左菜单。路线嵌套有问题。我使用的是react路由器dom-v4。

您需要将场馆路线放在仪表板内

编辑

注意！正如注释（和其他答案）所述，这对V4不再有效。

您需要将场馆路线放在仪表板内

编辑

---

注意！正如注释（和其他答案）所述，这对V4不再有效。

您可以使用

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>

您可以使用
react router v4

您可以将路线更改为

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>

我已经试过了。这样做会产生以下错误：警告：您不应在同一路线中使用和；将被忽略。子路由在此不起作用。对于react router v4不太正确。不过，它将与v3或更早的版本一起工作。我们已经尝试过这一点。这样做会产生以下错误：警告：您不应在同一路线中使用和；将被忽略。子路由在此不起作用。对于react router v4不太正确。然而，它将与v3或早期版本一起工作。当我点击路线/仪表板/场地时，这样做会使我进入一个空白页面。基本上，没有找到这条路线。我是v4新手，所以这里有点困惑。你确定你删除了/dashboard Routed的确切属性吗？当我点击路线/dashboard/Vinces时，这会将我带到一个空页面。基本上，没有找到这条路线。我是v4新手，所以这里有点困惑。你确定你从/dashboard路径中删除了确切的属性吗
<BrowserRouter history={browserHistory}>
   <Switch>
      <Route exact path="/" component={RootContainer} />
      <Route exact path="/login" component={RedirectToApp(LoginPage)} />
      <Route path="/dashboard" component={RequiresAuth(AppContainer)} />

   </Switch>
</BrowserRouter>

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>
    );
  }