react

20.react/高阶/my-router/src/router/index.js

@@ -1,10 +1,14 @@
+import { lazy, Suspense } from "react";
 import { createBrowserRouter, createHashRouter } from "react-router-dom";
 
-import Home from '../pages/Home';
-import List from '../pages/List';
-import My from '../pages/My';
 import Layout from "../layout";
 import Detail from "../pages/Detail";
+// import Home from '../pages/Home';
+// import List from '../pages/List';
+// import My from '../pages/My';
+const Home = lazy(() => import('../pages/Home'));
+const List = lazy(() => import('../pages/List'));
+const My = lazy(() => import('../pages/My'));
 
 const router = createBrowserRouter([
     {
@@ -15,21 +19,27 @@ const router = createBrowserRouter([
             {
                 index: true,
                 // path: 'home',
-                element: <Home></Home>
+                element: (<Suspense  fallback="加载中...">
+                    <Home></Home>
+                </Suspense>)
             },
             {
                 path: 'list',
-                element: <List></List>
+                element: (<Suspense  fallback="加载中...">
+                    <List></List>
+                </Suspense>)
             },
             {
                 path: 'my',
-                element: <My></My>
+                element:(<Suspense  fallback="加载中...">
+                    <My></My>
+                </Suspense>)
             },
         ]
     },
     {
-        path:'/detail/:id/:name',
-        element: <Detail/>
+        path: '/detail/:id/:name',
+        element: <Detail />
     }
     // {
     //     path:'/detail',