Reagieren Sie beim verzögerten Laden des Routings

Schließen Sie die Routing-Lazy-Loading-Funktion ab

Abhängigkeiten installieren

Garn hinzufügen reaktionsbelastbar

Erstellen Sie eine neue Datei „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;

in der Route verwendet

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",
  },
];