From 0e3d8a628c8497b8dd9075df86a9f4842f396971 Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Thu, 22 Jul 2021 17:32:36 +0800
Subject: [PATCH] add

---
 src/AppRouter.tsx            | 50 ++++++++++++++++++++++++++------------------
 src/assets/style/common.scss | 10 ++++-----
 src/route.tsx                | 15 ++++++++++---
 src/views/About/index.tsx    | 10 ++++++++-
 src/views/Layout/index.tsx   |  8 +++----
 src/views/Login/Test.tsx     |  9 ++++++++
 src/views/Login/index.tsx    | 18 ++++++++++++++++
 7 files changed, 87 insertions(+), 33 deletions(-)
 create mode 100644 src/views/Login/Test.tsx
 create mode 100644 src/views/Login/index.tsx

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 175df35..5c25c25 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -6,30 +6,40 @@ import { pageList } from "@/plugins/pageHoc"
 import Layout from "@/views/Layout"
 
 import Auth from "@/ui/Auth"
-import routes from "./route"
+import routes,{Loading} from "./route"
+
+function Wrapper(props: any) {
+  if (!props.isSub) {
+    return <React.Suspense fallback={<Loading></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 (
-    <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}></RouteMap>}</route.component>
-            </Auth>
-          )
-        }
-      })}
-    </Switch>
+    <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>
   )
 }
 
diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss
index fca9333..1ed1e7d 100644
--- a/src/assets/style/common.scss
+++ b/src/assets/style/common.scss
@@ -9,11 +9,11 @@ textarea {
 }
 
 body{
-  background-image: url("@/assets/images/0.jpg");
-  background-attachment: fixed;
-  background-position: center top 36px;
-  background-repeat: no-repeat;
-  background-size: cover;
+  // background-image: url("@/assets/images/0.jpg");
+  // background-attachment: fixed;
+  // background-position: center top 36px;
+  // background-repeat: no-repeat;
+  // background-size: cover;
 }
 a {
   // color: initial;
diff --git a/src/route.tsx b/src/route.tsx
index c76e850..a51f89f 100644
--- a/src/route.tsx
+++ b/src/route.tsx
@@ -1,23 +1,28 @@
 import Home from "@/views/Home"
 import About from "@/views/About"
 import Page404 from "@/views/Auth/Page404"
-import React from "react"
+import React, {lazy} from "react"
 
 function Test() {
   return <div>TExtas</div>
 }
 
+export const Loading = ()=><div>Loding...</div>
+
 export default [
   {
     path: "/about",
     component: About,
     meta: {
-      auth: true,
+      auth: false,
     },
     children: [
       {
         path: "/about/test",
-        component: Test,
+        meta: {
+          auth: false,
+        },
+        component: lazy(()=>import("@/views/Login/Test")),
       },
     ],
   },
@@ -35,6 +40,10 @@ export default [
     redirect: "/home",
   },
   {
+    path: "/login",
+    component: lazy(() => import("@/views/Login"))
+  },
+  {
     path: "*",
     exact: false,
     component: Page404,
diff --git a/src/views/About/index.tsx b/src/views/About/index.tsx
index a107356..23c9e93 100644
--- a/src/views/About/index.tsx
+++ b/src/views/About/index.tsx
@@ -1,13 +1,21 @@
 import React from "react"
-import { useLocation } from "react-router-dom"
+import { useLocation, Route, Switch } from "react-router-dom"
+
+function Test() {
+  return <div>test</div>
+}
 
 export default function (props: any) {
   let location = useLocation()
   console.log(location)
+  console.log(props)
   return (
     <div className="container mx-auto">
       <div>About</div>
       <div>22{props.children}</div>
+      <Route path="/about/aa" exact={true}>
+        <Test></Test>
+      </Route>
     </div>
   )
 }
diff --git a/src/views/Layout/index.tsx b/src/views/Layout/index.tsx
index d2c9299..21460e6 100644
--- a/src/views/Layout/index.tsx
+++ b/src/views/Layout/index.tsx
@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react"
 import { useLocation } from "react-router-dom"
 
-interface IProps {
-  render(): ReactElement
-}
+// interface IProps {
+//   render(): ReactElement
+// }
 
-export default function (props: IProps) {
+export default function (props: any) {
   return (
     <div>
       <div className="content">
diff --git a/src/views/Login/Test.tsx b/src/views/Login/Test.tsx
new file mode 100644
index 0000000..3afe615
--- /dev/null
+++ b/src/views/Login/Test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function(){
+  return (
+    <div>
+      saadsadsaddddddddddddddddd
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
new file mode 100644
index 0000000..0def55d
--- /dev/null
+++ b/src/views/Login/index.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import { useLocation, Route, Switch } from "react-router-dom"
+
+function Test() {
+  return <div>test</div>
+}
+
+export default function (props: any) {
+  let location = useLocation()
+  console.log(location)
+  console.log(props)
+  return (
+    <div className="container mx-auto">
+      <div>Login</div>
+      <div>22</div>
+    </div>
+  )
+}