React路由懒加载

完成路由懒加载功能

安装依赖

yarn add react-loadable

新建loadable.js文件

import React from "react";
import {
    
     Spin } from "antd";
import Loadable from "react-loadable";

// 加载动画
const loadingComponent = () => {
    
    
  return (
    <div className={
    
    "spin-loading"}>
      <div>
        <Spin size="large" />
      </div>
    </div>
  );
};
// 当不传加载动画时候使用默认的加载动画
const loader = (loader, loading = loadingComponent) => {
    
    
  return Loadable({
    
    
    loader,
    loading,
  });
};

export default loader;

route中使用

import loadable from "../utils/loadable";
export const homeRoutes = [
  {
    
    
    path: "/login",
    component: loadable(() => import("@/pages/login")),
    title: "登录",
  },
  {
    
    
    path: "/404",
    component: loadable(() => import("@/components/other/404")),
    title: "404",
  },
];