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

栏目: 服务器 · 发布时间: 5年前

内容简介:前面的课程都是使用的约定路由,就是自动生成的,但是我们做项目大部分都是涉及权限控制的,这时就还是得用控制路由,仅今天就来改进一下一旦使用了配置路由,那么pages下的文件将不再生成路由。里面的判断可以根具你自己的业务来写,我这边是跳转到登陆页面。

前面的课程都是使用的约定路由,就是自动生成的,但是我们做项目大部分都是涉及权限控制的,这时就还是得用控制路由,仅今天就来改进一下

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 的路径是相对于 src\pages 的。在需要权限控制的的路由下使用 Routes 属性配置。

2 鉴权路由组件 components\Authorized

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-pro https://github.com/ant-design... ,该有的都已经帮你搭好了,如果你也想开发后台管理的系统。

别忘了关注我 mike啥都想搞
React框架Umi实战(3)路由进阶

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


以上所述就是小编给大家介绍的《React框架Umi实战(3)路由进阶》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML和XHTML权威指南(第五版)

HTML和XHTML权威指南(第五版)

Chuck Musciano、Bill Kennedy / 技桥 / 清华大学出版社 / 2004-6-1 / 72.00元

HTML!XHTML!级联样式表!编写网页的标准很难整理,因为各种版本的Netscape和Internet Explorer在其实现方式上千差万别。《HTML与XHTML权威指南》将这些标准全部介绍给了读者。本书作者找出了各种标准和浏览器特性,并在创建网页方面为读者提出了很多建议,以便能够被更广泛的浏览者和平台所接受。 学习HTML或XHTML和学习其他任何语言一样。大部分学生都是从......一起来看看 《HTML和XHTML权威指南(第五版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具