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

對比下來第一種方式相對簡單，只需要在一處進行配置