add

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": false,
+  "TrailingCooma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "printWidth": 140
+}

src/AppRouter.tsx

@@ -1,41 +1,54 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Redirect,
-  Route,
-  Link,
-} from "react-router-dom";
-import React from "react";
+import { BrowserRouter as Router, Switch, Redirect, Route, Link } from "react-router-dom"
+import React, { Fragment } from "react"
 
-import { pageList } from "@/plugins/pageHoc";
+import { pageList } from "@/plugins/pageHoc"
 
-import Layout from "@/views/Layout";
+import Layout from "@/views/Layout"
 
-import Home from "@/views/Home";
-import About from "@/views/About";
+import Auth from "@/ui/Auth"
+import routes from "./route"
+
+function RouteMap(props: any) {
+  const routes: any[] = props.routes
+  return (
+    <Switch>
+      {routes.map((route, index) => {
+        console.log(route.path, route.exact)
+
+        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>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
+            </Auth>
+          )
+        }
+      })}
+    </Switch>
+  )
+}
 
 export default function () {
-  console.log(pageList);
+  console.log(pageList)
 
   return (
     <Router>
+      {/* <Switch> */}
       <Layout
         render={() => {
           return (
-            <Switch>
-              <Route path="/about">
-                <About />
-              </Route>
-              <Route path="/home">
-                <Home />
-              </Route>
-              <Route path="/">
-                <Redirect to="/home"></Redirect>
-              </Route>
-            </Switch>
-          );
+            <RouteMap routes={routes}></RouteMap>
+          )
         }}
       ></Layout>
+      {/* </Switch> */}
     </Router>
-  );
+  )
 }

src/assets/style/common.scss

@@ -1,4 +1,5 @@
 @import "./reset.scss";
+
 body,
 button,
 input,
@@ -6,31 +7,20 @@ select,
 textarea {
   font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
 }
-body{
-  background-image: url("@/assets/images/0.jpg");
-  background-attachment: fixed;
-  background-position: center top 36px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
+
+// body{
+//   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;
   text-decoration: none;
   color: inherit;
 }
 
-@mixin clearfix {
-  &:after {
-    clear: both;
-    content: ".";
-    display: block;
-    height: 0;
-    line-height: 0;
-    overflow: hidden;
-  }
-  *height: 1%;
-}
-
 .clearfix {
   @include clearfix;
 }

src/assets/style/global.scss

@@ -1 +1,14 @@
-$color: green;
+$color: green;
+
+
+@mixin clearfix {
+  &:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    overflow: hidden;
+  }
+  *height: 1%;
+}

src/route.tsx

@@ -0,0 +1,45 @@
+import Home from "@/views/Home"
+import About from "@/views/About"
+import Page404 from "@/views/Auth/Page404"
+import React from "react"
+
+function Test() {
+  return <div>TExtas</div>
+}
+
+export default [
+  {
+    path: "/about",
+    component: About,
+    exact: false,
+    meta: {
+      auth: true,
+    },
+    children: [
+      {
+        path: "/about/test",
+        component: Test,
+        exact: false,
+      },
+    ],
+  },
+  {
+    path: "/home",
+    component: Home,
+    exact: true,
+    meta: {
+      auth: false,
+    },
+    children: [],
+  },
+  {
+    path: "/",
+    exact: true,
+    redirect: "/home",
+  },
+  {
+    path: "*",
+    exact: false,
+    component: Page404,
+  },
+]

src/ui/Auth.tsx

@@ -0,0 +1,37 @@
+import React, { Component, ReactElement } from "react"
+// 高阶组件，就是对原来的组件进行封装
+import { Route, Redirect, NavLink } from "react-router-dom"
+
+interface IProps {
+  needAuth?: boolean
+  path: string
+  exact?: boolean
+}
+
+class Auth extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    const { path, needAuth = false, exact = false } = this.props // 结构语法的概
+    if (!needAuth) {
+      return (
+        // 如果已经登陆，就直接显示原来的组件
+        <Route exact={exact} path={path}>
+          {this.props.children}
+        </Route>
+      )
+    } else {
+      return (
+        <div>
+          <NavLink to="/login">你还有没有登陆好吧！</NavLink>
+
+          {/* <Redirect to={{ pathname: '/login', state: { from: { path }} }} > </Redirect> */}
+        </div>
+      )
+    }
+  }
+}
+
+export default Auth

src/views/About/index.tsx

@@ -1,9 +1,13 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
+import React from "react"
+import { useLocation } from "react-router-dom"
 
 export default function (props: any) {
-
   let location = useLocation()
-  console.log(location);
-  return <div className="container mx-auto">About</div>;
+  console.log(location)
+  return (
+    <div className="container mx-auto">
+      <div>About</div>
+      <div>22{props.children}</div>
+    </div>
+  )
 }

src/views/Auth/Page404.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import { NavLink } from "react-router-dom"
+
+export default function () {
+  return (
+    <div>
+      <NavLink to="/">404</NavLink>
+    </div>
+  )
+}

src/views/Home/index.tsx

@@ -1,30 +1,32 @@
-import React from "react";
-import style from "./index.module.scss";
-import Header from "./Header";
+import React from "react"
+import style from "./index.module.scss"
+import Header from "./Header"
+
+function Test() {
+  return <div>有权限了</div>
+}
 
 export default function (props: any) {
-  console.log(props);
+  console.log(props)
 
   return (
     <div>
       <Header></Header>
       <div className="mt-36px">
         <div className="bg-white min-h-100vh">
-          <div className="container clearfix mx-auto  h-500px">box</div>
-        </div>
-        <div className="min-h-100vh">
-
+          <div className="container clearfix mx-auto  h-500px">asda</div>
         </div>
+        <div className="min-h-100vh"></div>
         <div className="bg-white min-h-100vh">
           <div className="container clearfix mx-auto">
             {[...Array(100)]
               .map((v, i) => i)
-              .map((v) => {
-                return <p key={v}>v</p>;
+              .map(v => {
+                return <p key={v}>v</p>
               })}
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }

src/views/Layout/index.tsx

@@ -1,10 +1,16 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
+import React, { ReactElement } from "react"
+import { useLocation } from "react-router-dom"
 
-export default function (props: any) {
+interface IProps {
+  render(): ReactElement
+}
+
+export default function (props: IProps) {
   return (
     <div>
-      <div className="content">{props?.render()}</div>
+      <div className="content">
+        <props.render></props.render>
+      </div>
     </div>
-  );
+  )
 }