路由

21.react/高阶/project4/src/Layout/index.jsx

@@ -32,7 +32,7 @@ function Layout() {
                     color: isPending ? "#f00" : isActive ? "#ff0" : "#00f"
                 })} state={{ from: '我的' }}>我的</NavLink>
             </header>
-            <main>
+            <main >
                 <Outlet></Outlet>
             </main>
         </div>

21.react/高阶/project4/src/router/index.jsx

@@ -1,13 +1,35 @@
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter } from "react-router-dom";
-import Home from "../pages/Home";
-import My from "../pages/My";
-import List from "../pages/List";
-import Error from '../pages/Error';
+// import Home from "../pages/Home";
+// import My from "../pages/My";
+// import List from "../pages/List";
+// import Error from '../pages/Error';
 import Layout from "../Layout";
-import Detail from "../pages/Detail";
-import Login from "../pages/Login";
+// import Detail from "../pages/Detail";
+// import Login from "../pages/Login";
 import axios from 'axios';
-import ErrorPage from '../pages/ErrorPage'
+// import ErrorPage from '../pages/ErrorPage'
+const Home = lazy(() => import("../pages/Home"))
+const My = lazy(() => import("../pages/My"))
+const List = lazy(() => import("../pages/List"))
+const Error = lazy(() => import("../pages/Error"))
+// const Layout = lazy(() => import("../pages/Layout"))
+const Detail = lazy(() => import("../pages/Detail"))
+const Login = lazy(() => import("../pages/Login"))
+const ErrorPage = lazy(() => import("../pages/ErrorPage"))
+/**
+ * 为什么要懒加载：
+ *  没有懒加载 用户访问首页 下载500kb 渲染首页 只能看到首页 但是缺下载了所有页面的代码
+ *  存在懒加载 用户访问首页 下载50kb 渲染首页 用户访问商品 下载商品 这样子按照需求进行下载 不用全部下载
+ */
+function withSuspense(Com, label) {
+    return (
+        <Suspense fallback={<div>{label}加载中...</div>}>
+            <Com />
+        </Suspense>
+    )
+}
+
 const routes = [
     {
         path: '/',
@@ -18,37 +40,37 @@ const routes = [
                 // 索引路由
                 index: true,
                 // path: 'home',
-                element: <Home />
+                element: withSuspense(Home, '首页')
             },
             {
                 path: 'my',
-                element: <My />
+                element: withSuspense(My, '我的')
             },
             {
                 path: 'list',
-                element: <List />,
+                element: withSuspense(List, '列表'),
                 loader: async () => {
                     const res = await axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList")
                     console.log(res, 'res')
                     return { res }
                 },
-                errorElement: <ErrorPage></ErrorPage>
+                errorElement: withSuspense(ErrorPage, '报错边界')
             }
         ]
     },
     {
         // listId 商品ID 动态参数
         path: '/detail/:listId/:title?',
-        element: <Detail />
+        element: withSuspense(Detail, '详情')
     },
     {
         // 兜底路由
         path: '*',
-        element: <Error />
+        element: withSuspense(Error, '兜底路由')
     },
     {
         path: '/login',
-        element: <Login />
+        element: withSuspense(Login, '登录')
     }
 ]