配置路由懒加载---React

1.把路由修改为由React提供的 lazy 函数进行动态导入

2.使用React内置的 Suspense组件 包裹路由中element选项对应的组件

router/index.js

import { createBrowserRouter } from "react-router-dom";

// 判断当前是否授权
import { AuthRoute } from "@/components/AuthRoute";

// 引入组件
import Layout from "@/pages/Layout";
import Login from "@/pages/Login";
import { Suspense } from "react";

// 1.lazy函数对组件进行导入
const Home = lazy(() => import("@/pages/Home"))

// 2.Suspense
const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <AuthRoute>
        <Layout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: <Suspense fallback={加载中}> <Home /> </Suspense>
      }
    ]
  },
  {
    path: "/login",
    element: <Login />,
  },
]);

export default router;