zoukankan      html  css  js  c++  java
  • Umi嵌套路由

    当需要在所有页面加入一些相同的判断逻辑时,需要用到嵌套路由,比如所有页面都需要登录,如果没有登录,跳转到登录页面登录完成后,再进入对应的页面,这个可以在父页面完成。有两种方式实现以上功能

    一、使用this.props.children

    config.js配置 - 代码片段

           {
              path: '/login',
              component: '../layouts/LoginBasicLayout',
              routes: [
                {
                  path: '/login/urlJump/list',
                  component: '../pages/safe/list/UrlConfigListPage.jsx'
                },
              ]
            },

    LoginBasicLayout.js页面部分代码

      render() {
        return <div>
          {this.props.children}
        </div>
      }

    访问 /login/urlJump/list 会渲染UrlConfigListPage.jsx

    二、使用Router

    config.js配置部分代码

            {
              path: '/login',
              component: '../layouts/LoginBasicLayout',
              routes: [
                {
                  path: '/urlJump/list',   //此处前面加不加/login都可以
                  component: '../pages/safe/list/UrlConfigListPage.jsx'
                },
              ]
            },

    LoginBasicLayout.js页面部分代码

      render() {
        return <div>
          <Route exact path={`${this.props.match.path}/urlJump/list`} component={UrlConfigListPage}/>
          {/*{this.props.children}*/}
        </div>
      }

    对比下来第一种方式相对简单,只需要在一处进行配置

  • 相关阅读:
    todo-list
    codeforces 794 (#414 DIV1+DIV2)
    2018bnu校赛总结
    codeforces 743D
    HDU-2196 Computer (树形DP)
    HDU- 1005 Number Sequence(矩阵快速幂)
    HDU- 4000 Fruit Ninja(树状数组)
    codeforces 505C
    codeforces 286B
    codeforces 3D
  • 原文地址:https://www.cnblogs.com/xiaochengzi/p/13469592.html
Copyright © 2011-2022 走看看