路由懒加载 + loading

src/App.tsx

@@ -1,14 +1,16 @@
 import { useRoutes } from "react-router-dom";
 import routes from "./routes";
 import "./App.scss";
+import { Suspense } from "react";
+import LoadingPage from "./pages/loading";
 
 function App() {
   const Views = () => useRoutes(routes);
 
   return (
-    <div>
+    <Suspense fallback={<LoadingPage />}>
       <Views />
-    </div>
+    </Suspense>
   );
 }
 

src/pages/loading/index.tsx

@@ -0,0 +1,11 @@
+import { Spin } from "antd";
+
+const LoadingPage = () => {
+  return (
+    <>
+      <Spin />
+    </>
+  );
+};
+
+export default LoadingPage;

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { RouteObject } from "react-router-dom";
 
 import { LayoutPage } from "../pages";
 
+// 懒加载
 const LoginPage = lazy(() => import('../pages/login'))
 
 const routes: RouteObject[] = [