react16 路由按需加载、路由权限配置

 1. 路由按需加载：

　　不做按需加载，代码全部打包在bundle.js 文件里，首屏渲染很慢，项目文件较多，会出现1分钟加载的可能性。

　　

import React, { Component } from 'react';
import Loadable from 'react-loadable';    // 按需加载依赖包
import {HashRouter,Route,Switch} from "react-router-dom"

const Loading = () => 
Loading...
;

const A = Loadable({   //A页面 按需加载处理
    loader: () => import('../pages/page1'),
    loading:Loading,
});
const B = Loadable({   // B页面 按需加载处理
    loader: () => import('../pages/page2'),
    loading:Loading,
});


class App extends Component {
    render() {
        return (
            
                
                       // 加载A组件
                    
                    
                
            
        );
    }
}

export default App;

　　如此简单;

2.路由权限配置

　　场景：后台管理系统，有用户管理（增删改查），订单管理（发货，删除，修改，查看），资金流水（收益查看，提现）等一系列模块，不同身份的人注册登录进来，展示不同的模块；

　  思路: (1) 注册登录进来，获取此人的权限，配置相应的路由。（2）浏览器刷新，需重新获取此人的权限，配置路由。

　　

import React, { Component } from 'react';
import Loadable from 'react-loadable';
import Permission from "./permission"
import {HashRouter,Route,Switch} from "react-router-dom"

const Loading = () => 
Loading...
;

const A = Loadable({
    loader: () => import('../pages/page1'),
    loading:Loading,
});
const B = Loadable({
    loader: () => import('../pages/page2'),
    loading:Loading,
});


class App extends Component {
    render() {
        return (
            
                
                    
                    
                      //需要权限访问的路由全部放置此组件里处理，permission组件
                     
                
            
        );
    }
}

export default App;

　　

permission组件

import React,{Component} from "react"
import {getPermissin} from "../actionCreaters"
import {Route,Switch} from "react-router-dom"
import {connect} from "react-redux"
import A from "../pages/page1"

class Permission extends Component{
    render(){
        if(this.props.permissions.length === 0 ){    //权限存储在redux中，如果只在登录或注册获取权限配置，刷新时，将被清空。所以实时的配置路由守卫里，当权限数组为空时，请求接口获取权限
            this.props.requestForPermission();
            return 
请等待....
        }
        const routers = this.props.permissions.map(item=>{ // 获取到权限进行路由配置
            return 
欢迎{item.code}
} key={item.code}/>
        });
        return 
            {routers}
             //匹配不到此路由，跳转到A组件
        ;
    }
}
export default connect((state)=>{  
    return {
        permissions:state.author.permissions
    }
},(dispatch)=>{
    return {
        requestForPermission(){
            dispatch(getPermissin());
        }
    }
})(Permission);

　　如此简单；

接下来，什么项目都不怕啦~

　　

 

转载于:https://www.cnblogs.com/changyaoself/p/10320583.html