React Router v4不呈现父组件

Question

I have my routes set up as following (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>

In my AppContainer I have my component written as:

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

When I go to the route /dashboard, the header, footer and the left menu get rendered properly.

But when I hit the route /dashboard/venues, only the content present inside the VenuesPage is rendered. The header, footer and leftmenu are not getting rendered. Having a problem with nesting of routes. I am using react-router-dom - v4.

Answer 1

You need to put the venues Route inside dashboard

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

EDIT

NB! As the comments (and the other answer) state, this is no longer valid for V4.

Answer 2

You can add Routes within your components with react-router v4

You can change the routes to

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>

Now that you want the VenuesPage to be child of the AppContainer . You can add it within the AppContainer component like

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