react

19.React/高阶/project2/src/pages/Error.jsx

@@ -4,3 +4,4 @@ function Error() {
     )
 }
 export default Error;
+

19.React/高阶/project2/src/router/index.js

@@ -1,10 +1,40 @@
-import { createBrowserRouter } from "react-router-dom";
-import Home from "../pages/Home";
-import List from "../pages/List";
+import { lazy, Suspense } from "react";
+import { createBrowserRouter,createHashRouter } from "react-router-dom";
+// import Home from "../pages/Home";
 import My from "../pages/My";
 import Layout from "../layout";
 import Error from "../pages/Error";
 import Detail from "../pages/Detail";
+// import List from "../pages/List";
+const List = lazy(() => import("../pages/List"));
+const Home = lazy(() => import("../pages/Home"));
+
+
+/**
+ * 组件
+ * 一个独立的 可复用的 
+ * 负责渲染页面磨一部分的内容
+ * 处理对应逻辑的代码单元 
+ * 通常是函数或者类
+ * */
+
+
+/**
+ * 高阶组件:HOC
+ * 是一个接受一个组件作为参数
+ * 并且返回一个新组件函数
+ * 
+ * 核心：
+ * 抽离复杂逻辑
+ * 实现组件逻辑的复用
+ * */
+
+function withSuspense(Component) {
+    return (<Suspense fallback={<h3>正在加载中....</h3>}>
+        <Component></Component>
+    </Suspense>)
+}
+
 const routes = [
     {
         path: '/',
@@ -12,11 +42,11 @@ const routes = [
         children: [
             {
                 path: 'home',
-                element: <Home></Home>
+                element: withSuspense(Home)
             },
             {
                 path: 'list',
-                element: <List></List>
+                element: withSuspense(List)
             },
             {
                 path: 'my',
@@ -25,15 +55,15 @@ const routes = [
         ]
     }, {
         path: '*',
-        element:<Error></Error>
-    },{
-        path:'/detail',
+        element: <Error></Error>
+    }, {
+        path: '/detail',
         // path:'/detail/:ids',
         element: <Detail></Detail>
     }
 ];
 
-const router = createBrowserRouter(routes);
+const router = createHashRouter(routes);
 
 export default router;