From 10d451ff21879443ada76417ecfb77ef8e7dd078 Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Fri, 23 Jul 2021 10:08:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/AppRouter.tsx | 56 ++++++++++++++++++++++++++++---------------------------
 src/route.tsx     | 36 +++++++++++++++++++++++++++--------
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 5c25c25..8ab753b 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -6,40 +6,41 @@ import { pageList } from "@/plugins/pageHoc"
 import Layout from "@/views/Layout"
 
 import Auth from "@/ui/Auth"
-import routes,{Loading} from "./route"
+import routes from "./route"
 
 function Wrapper(props: any) {
-  if (!props.isSub) {
-    return <React.Suspense fallback={<Loading></Loading>}>{props.children}</React.Suspense>
+  if (props.loading) {
+    return <React.Suspense fallback={<props.loading></props.loading>}>{props.children}</React.Suspense>
   }
   return <Fragment>{props.children}</Fragment>
 }
 
 function RouteMap(props: any) {
   const routes: any[] = props.routes
-  const isSub: boolean = props.isSub
   return (
-    <Wrapper isSub={isSub}>
-      <Switch>
-        {routes.map((route, index) => {
-          const { exact = false } = route
-          if (route.redirect) {
-            return (
-              <Route key={index} path={route.path} exact={exact}>
-                <Redirect to={route.redirect}></Redirect>
-              </Route>
-            )
-          }
-          if (route.component) {
-            return (
-              <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
-                <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children} isSub></RouteMap>}</route.component>
-              </Auth>
-            )
-          }
-        })}
-      </Switch>
-    </Wrapper>
+    <Switch>
+      {routes.map((route, index) => {
+        const { exact = false } = route
+        if (route.redirect) {
+          return (
+            <Route key={index} path={route.path} exact={exact}>
+              <Redirect to={route.redirect}></Redirect>
+            </Route>
+          )
+        }
+        if (route.component) {
+          return (
+            <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
+              <Wrapper loading={route.loading}>
+                <route.component meta={route.meta}>
+                  {route.children && <RouteMap routes={route.children}></RouteMap>}
+                </route.component>
+              </Wrapper>
+            </Auth>
+          )
+        }
+      })}
+    </Switch>
   )
 }
 
@@ -48,11 +49,12 @@ export default function () {
 
   return (
     <Router>
-      <Layout
+      <RouteMap routes={routes}></RouteMap>
+      {/* <Layout
         render={() => {
           return <RouteMap routes={routes}></RouteMap>
         }}
-      ></Layout>
+      ></Layout> */}
     </Router>
   )
 }
diff --git a/src/route.tsx b/src/route.tsx
index a51f89f..9caf37c 100644
--- a/src/route.tsx
+++ b/src/route.tsx
@@ -1,34 +1,54 @@
-import Home from "@/views/Home"
-import About from "@/views/About"
 import Page404 from "@/views/Auth/Page404"
-import React, {lazy} from "react"
+import React, { lazy } from "react"
 
 function Test() {
   return <div>TExtas</div>
 }
 
-export const Loading = ()=><div>Loding...</div>
+const Loading = (props: any) => <div style={{ color: props.color }}>Lodeing.22..</div>
+
+let delay =
+  (Comp: any, duration = 1000) =>
+  () =>
+    new Promise<any>(resolve =>
+      Comp()
+        .then((res: any) => {
+          setTimeout(() => {
+            resolve(res)
+          }, duration)
+        })
+        .catch(() => {
+          resolve({
+            default: () => <div>Error</div>,
+          })
+        })
+    )
 
 export default [
   {
     path: "/about",
-    component: About,
+    component: lazy(() => import("@/views/About")),
+    exact: false,
     meta: {
       auth: false,
     },
+    loading: () => <Loading color="red"></Loading>,
     children: [
       {
         path: "/about/test",
+        exact: true,
         meta: {
           auth: false,
         },
-        component: lazy(()=>import("@/views/Login/Test")),
+        loading: () => <Loading color="green"></Loading>,
+        component: lazy(delay(() => import("@/views/Login/Test"))),
       },
     ],
   },
   {
     path: "/home",
-    component: Home,
+    component: lazy(() => import("@/views/Home")),
+    loading: () => <Loading color="blue"></Loading>,
     meta: {
       auth: false,
     },
@@ -41,7 +61,7 @@ export default [
   },
   {
     path: "/login",
-    component: lazy(() => import("@/views/Login"))
+    component: lazy(() => import("@/views/Login")),
   },
   {
     path: "*",