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 = () => <div>Loading...</div>;

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 (
            <HashRouter>
                <Switch>
                    <Route exact path={"/a"} component={A}/>   // 加载A组件
                    <Route exact path={"/b"} component={B}/>
                    <Route component={A}/>
                </Switch>
            </HashRouter>
        );
    }
}

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 = () => <div>Loading...</div>;

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


class App extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route exact path={"/a"} component={A}/>
                    <Route exact path={"/b"} component={B}/>
                    <Route path={"/admin"} component={Permission}/>  //需要权限访问的路由全部放置此组件里处理，permission组件
                    <Route component={A}/> 
                </Switch>
            </HashRouter>
        );
    }
}

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 <div>请等待....</div>
        }
        const routers = this.props.permissions.map(item=>{ // 获取到权限进行路由配置
            return <Route exact path={`/admin/${item.code}`} render={()=><div>欢迎{item.code}</div>} key={item.code}/>
        });
        return <Switch>
            {routers}
            <Route component={A}/> //匹配不到此路由，跳转到A组件
        </Switch>;
    }
}
export default connect((state)=>{  
    return {
        permissions:state.author.permissions
    }
},(dispatch)=>{
    return {
        requestForPermission(){
            dispatch(getPermissin());
        }
    }
})(Permission);

　　如此简单；

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