Question

我将ReactJS与React-Router一起用于仪表板样式应用程序。

App.js

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

这是主文件的样子，首先是用户必须登录，所以我不想显示侧栏等内容。但是，如果我登录，我想进入主视图，其风格完全不同。在这个视图中，我现在想要一个子视图，因为我不想添加这些div和＆amp;我制作的每条新路线的组成部分。

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>

我已经查找了子路线和嵌套视图，但我找不到任何我正在寻找的东西。

什么是实现这种双重视图的最好方法？

编辑：反应＆amp; react-router版本0.13.3

Answer 1

我没有深入挖掘react-router。实际上，这种嵌套路由非常容易。

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标记，以便路由处理程序知道放置视图的位置。

在视图

1 个答案: