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);
如此简单;
接下来,什么项目都不怕啦~