react路由懒加载和路由缓存

之前用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要麻烦的多，但实现功能还是没有问题的