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>
  }

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