add

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>
   )
 }
 

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;

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,

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>
   )
 }

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">

src/views/Login/Test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function(){
+  return (
+    <div>
+      saadsadsaddddddddddddddddd
+    </div>
+  )
+}

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>
+  )
+}