视图中的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

你看过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标签。

视图中的React子视图

相关推荐