React框架Umi实战(3)路由进阶

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React框架Umi实战(3)路由进阶脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前面的课程都是使用的约定路由,就是自动生成的,但是我们做项目大部分都是涉及权限控制的,这时就还是得用控制路由,仅今天就来改进一下

1 修改配置.umirc.js


// ref: https://umijs.org/config/
export default {
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.htML
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dva: {
          immer: true
        },
      dynamicImport: false,
      tITle: 'umis',
      dll: false,
      hardsource: false,
      routes: {
        exclude: [
          /model.(j|t)sx?$/,
          /service.(j|t)sx?$/,
          /models//,
          /components//,
          /services//,
        ],
      },
    }],
  ],
  routes: [
       {
        path: '/',
        component: '../layouts',
       },
       {
        path: '/users',
        component: '../layouts',
        Routes: ['src/components/Authorized'],
        routes: [
                { path: '/users', component: './users' },
         ],
       },
       {
        path: '/LOGin',
        component: '../layouts',
        routes: [
                { path: '/login', component: './login' },
         ],
       },
       {
        path: '/test',
        component: '../layouts',
        routes: [
                { path: '/test', component: './test' },
         ],
       },
  ]
}

一旦使用了配置路由,那么pages下的文件将不再生成路由。component的路径是相对于srcpages的。在需要权限控制的的路由下使用Routes属性配置。

2 鉴权路由组件 componentsAuthorized

import React, { Component } from 'react'
import { connect } from 'dva';
import { Router, Route, Redirect, withRouter } from 'dva/router';
import { message } from 'antd';

class AuthRouter extends Component {
    render() {
        const { component: Component, ...rest } = this.props
        const isLogged = false
        if (!isLogged) {
          message.warning('您需要先登陆');
        }
        return (
            <Route {...rest} render={props => {
              return isLogged
                  ? <Component {...props} />
                  : <Redirect to="/login" />
            }} />
        )
      }
}

function mapStateToProps(state) {
 return {
   state
 }
}

// export default ListData;
export default connect(mapStateToProps)(withRouter(AuthRouter));

里面的判断可以根具你自己的业务来写,我这边是跳转到登陆页面

3 登陆页面

import { connect } from 'dva';
function Login(){
  return (
    <div>
      <h1>this is login page</h1>
    </div>

  )
}

function mapStateToProps(state) {
  console.log(state.login);
  return {
    test:'fhf'
  };
}

export default connect(mapStateToProps)(Login);

这样你访问/users 就会重定向到登陆页面:

React框架Umi实战(3)路由进阶

4 总结

这样简单的umi使用就结束了,在我看来重点就这么多,大部分还是dva的使用,参考我之前的dva系列学一下就好了。这些框架其实都是比较好上手,关键还是React的基础要掌握好,还有es6的语法。如果你想要直接进入开发,建议不要自己再花时间搭建框架。即使你使用了umi自己按我所写的搭建出来,也没有直接用现成的快。
而且重复造轮子,并没有什么意义。建议直接使用ant-design-prohttps://github.com/ant-design...,该有的都已经帮你搭好了,如果你也想开发后台管理的系统。

别忘了关注我 mike啥都想搞

React框架Umi实战(3)路由进阶

还有其他后端分享在我的公众号

脚本宝典总结

以上是脚本宝典为你收集整理的React框架Umi实战(3)路由进阶全部内容,希望文章能够帮你解决React框架Umi实战(3)路由进阶所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。