fix:study7

react/study7/priject/src/App.js

@@ -1,24 +1,58 @@
-import './App.css';
-import { NavLink, Route, Routes } from 'react-router-dom';
-import Home from './pages/Home';
-import About from './pages/About';
-import List from './pages/List';
-import ListName from './pages/ListName';
-import ListPhone from './pages/ListPhone';
+import "./App.css";
+import { NavLink, Route, Routes } from "react-router-dom";
+// 懒加载 lazy ; 配合懒加载使用的组件 Suspense
+import { lazy, Suspense } from "react";
+import Home from "./pages/Home";
+// import About from "./pages/About";
+// import List from "./pages/List";
+
+import ListName from "./pages/ListName";
+import ListPhone from "./pages/ListPhone";
+// 懒加载引入
+const List = lazy(() => import("./pages/List"));
+const About = lazy(async()=>{
+  await new Promise((resolve,reject)=>{
+    setTimeout(()=>{
+      resolve()
+    },1000)
+  })
+  return import('./pages/About')
+ })
+
+
+// 懒加载的高阶组件
+function LazyLoading(Component) {
+  return(
+    <Suspense fallback={<h4>正在加载中....</h4>}>
+      <Component/>
+    </Suspense>
+  )
+}
+
+
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <NavLink className='App-link' to={'/'}>首页</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;
-        <NavLink className='App-link' to={'/about'}>关于</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;
-        <NavLink className='App-link' to={'/list'}>列表</NavLink>
+        <NavLink className="App-link" to={"/"}>
+          首页
+        </NavLink>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <NavLink className="App-link" to={"/about"}>
+          关于
+        </NavLink>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <NavLink className="App-link" to={"/list"}>
+          列表
+        </NavLink>
       </header>
       <main>
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/about" Component={About} />
-          <Route path="/list" element={<List />}>
-            <Route index='true'  element={<ListPhone />}></Route>
+          <Route path="/about" element={LazyLoading(About)} />
+          {/* <Route path="/about" Component={About} /> */}
+          <Route path="/list" element={LazyLoading(List)}>
+            <Route index="true" element={<ListPhone />}></Route>
             <Route path="name" element={<ListName />} />
             {/* <Route path="phone" element={<ListPhone />} /> */}
           </Route>