視圖中的React子視圖

對於儀表板樣式應用程序，我將ReactJS與React-Router配合使用。視圖中的React子視圖

App.js

<div> 
    <Toolbar/> 
    <RouteHandler lang={this.state.lang} account={this.state.account} logout={this.handleLogout} validate={this.handleValidate} /> 
    </div>

這是主要的文件是什麼樣子，首先，用戶必須登錄，所以我不希望像側邊欄顯示的東西。但是如果我登錄，我想要進入完全不同風格的主頁視圖。在此視圖中，我現在想要一個子視圖，因爲我不想將這些div添加到我製作的每條新路線。

Home.js

<div id="main"> 
    <div id="left"> 
     <Logo /> 
     <Sidemenu /> 
    </div> 

    <div id="right"> 
     <Smallmenu /> 
     <Bigmenu /> 
     <!-- View needs to be here now --> 
    </div> 

    <Footer /> 
</div>

我已經找了子路由和嵌套的意見，但我無法找到任何我要找的。

什麼是完成這個雙視圖thingy的最佳方式？

編輯：陣營&反應路由器版本0.13.3

來源

2015-10-05 Niels

你看過react-router 1.0嗎？在1.0中，'Route'採用'components'（複數）prop，而你的組件只是使用'this.props.children'而不是'RouteHandler'。 –

我沒有深挖不夠成反應路由器。實現這種嵌套路由非常簡單。

var routes = (
    <Route name="App" path="/" handler={require('./components/App.jsx')}> 

     <DefaultRoute handler={require('./components/LoginPage.jsx')} />  

     <Route name="Main" handler={require('./components/MainPage.jsx')}> 
      <DefaultRoute handler={require('./components/views/News.jsx')} /> 
      <NotFoundRoute handler={require('./components/views/NotFound.jsx')} /> 
     </Route> 

     <NotFoundRoute handler={require('./components/NotFoundPage.jsx')} /> 

    </Route> 

);

您可以添加新的子路徑路由這種方式，並在主要成分，你需要這樣的路由處理程序知道在哪裏放置的意見再添RouteHandler標籤。

來源

2015-10-06 10:37:38 Niels

視圖中的React子視圖

回答

相關問題