之前用vue写的项目比较多,刚用react还是很不习惯,官网只有最基础的api,很多东西都要自己去研究,开始还是花费了一些力气,但还是最终还原了vue路由的所有功能,
路由懒加载和路由缓存功能
react路由懒加载,使用react-loadable
先安装 npm i react-loadable --save
创建loadable.js
文件
import React from "react";
import { Spin } from 'antd';
import Loadable from "react-loadable";
import '@/assets/css/layout.scss'
// 加载动画
const loadingComponent = () => {
return <Spin size="large" />;
};
export default (loader, loading = loadingComponent) => {
return Loadable({
loader,
loading,
});
};
在react的路由表里面修改
import Home from '@/pages/home'; //首页
import Undefined from '@/pages/error/404'; //404
import loadable from "@/utils/loadable"
export default [
{ path: '/Home', component: Home, name: 'Home' },
{ path: '/404', component: Undefined, name:'404' },
{
path: '/systemManage/Usermanage',
component: loadable(() => import(/* webpackChunkName: "Usermanage" */ "@/pages/systemManage/Usermanage")),
name: '用户管理'
},
{
path: '/order/orderList',
component: loadable(() => import(/* webpackChunkName: "orderList" */ "@/pages/order/orderList")),
name: '订单列表'
},
];
路由缓存 使用 react-router-cache-route
试了几个 就这个比较好用和简单
文档地址:中文文档
使用 CacheRoute 替换 Route
使用 CacheSwitch 替换 Switch(因为 Switch 组件只保留第一个匹配状态的路由,卸载掉其他路由)
import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'
import List from './views/List'
import Item from './views/Item'
const App = () => (
<Router>
<CacheSwitch>
<CacheRoute exact path="/list" component={List} />
<Route exact path="/item/:id" component={Item} />
<Route render={() => <div>404 未找到页面</div>} />
</CacheSwitch>
</Router>
)
export default App
可根据自身项目结构修改,使用方法就是这样,目前使用下来是比vue的keepAlive要麻烦的多,但实现功能还是没有问题的