优化路由实现

src/AppRouter.tsx

@@ -6,20 +6,18 @@ 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) {
+  if (props.loading) {
-    return <React.Suspense fallback={<Loading></Loading>}>{props.children}</React.Suspense>
+    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
@@ -33,13 +31,16 @@ function RouteMap(props: any) {
         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>
+              <Wrapper loading={route.loading}>
+                <route.component meta={route.meta}>
+                  {route.children && <RouteMap routes={route.children}></RouteMap>}
+                </route.component>
+              </Wrapper>
             </Auth>
           )
         }
       })}
     </Switch>
-    </Wrapper>
   )
 }
 
@@ -48,11 +49,12 @@ export default function () {
 
   return (
     <Router>
-      <Layout
+      <RouteMap routes={routes}></RouteMap>
+      {/* <Layout
         render={() => {
           return <RouteMap routes={routes}></RouteMap>
         }}
-      ></Layout>
+      ></Layout> */}
     </Router>
   )
 }

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: "*",