陣營路由器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> 
    ); 
    } 

當我轉到路線/儀表板，頁眉，頁腳和左側菜單得到正確渲染。

但是當我點擊路線/儀表板/場地時，只會呈現VenuesPage內的內容。頁眉，頁腳和左側菜單沒有被渲染。遇到路由嵌套的問題。我正在使用react-router-dom-v4。

Answer 1

您可以在組件中添加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> 
    ); 
    } 

Answer 2

你需要把場館路線內儀表盤

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

編輯

NB！如評論（和其他答案）所述，這不再適用於V4。