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

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

但是当我点击路线/仪表板/场地时，只会呈现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

您可以使用Routes

在组件中添加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>

现在您希望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无法渲染父组件

2 个答案: