add

package.json

@@ -6,30 +6,29 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "classnames": "^2.3.1",
-    "i18next": "^20.3.4",
-    "i18next-browser-languagedetector": "^6.1.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-i18next": "^11.11.3",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.1.0",
-    "redux-saga": "^1.1.3",
-    "styled-jsx": "^3.4.4"
+    "axios": "^1.3.4",
+    "classnames": "^2.3.2",
+    "i18next": "^22.4.10",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.8.2",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.2",
+    "styled-jsx": "^5.1.2"
   },
   "devDependencies": {
-    "@types/node": "^15.12.5",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.1.7",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
-    "redux-devtools": "^3.7.0",
-    "sass": "^1.35.1",
-    "typescript": "^4.3.2",
-    "vite": "^2.3.8",
-    "vite-plugin-windicss": "^1.2.0",
-    "windicss": "^3.1.3"
+    "@types/node": "^18.14.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react-swc": "^3.2.0",
+    "sass": "^1.58.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vite-plugin-windicss": "^1.8.10",
+    "windicss": "^3.5.6"
   }
 }

src/App.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function App() {
+
+    return (
+      <>
+        asdsa
+      </>
+    )
+  }
+  

src/AppRouter.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Redirect, Route, Link } from "react-router-dom"
+import { BrowserRouter as Router, Routes, Navigate, Route, Link, NavLink } from "react-router-dom"
 import React, { Fragment } from "react"
 
 import { pageList } from "@/plugins/pageHoc"
@@ -10,7 +10,7 @@ import routes, { Loading } from "./route"
 
 function LoadWrapper(props: any) {
   if (props.isLazy) {
-    const LoadingComp=props.loading?props.loading: ()=><Loading color="#ff0000"></Loading> //NormalLoading;
+    const LoadingComp = props.loading ? props.loading : () => <Loading color="#ff0000"></Loading> //NormalLoading;
     return <React.Suspense fallback={<LoadingComp></LoadingComp>}>{props.children}</React.Suspense>
   }
   return <Fragment>{props.children}</Fragment>
@@ -20,27 +20,44 @@ function RouteMap(props: any) {
   const routes: any[] = props.routes
 
   return (
-    <Switch>
+    <Routes>
       {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>
-          )
+          return <Route key={index} path={route.path} element={<Navigate to={route.redirect} replace />}></Route>
         }
         if (route.component) {
-          return (
-            <Auth key={index} needAuth={!!route.meta?.auth} path={route.path} exact={exact}>
-              <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
-                <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
-              </LoadWrapper>
-            </Auth>
-          )
+          if (!route.meta?.auth) {
+            return (
+              // 如果已经登陆，就直接显示原来的组件
+              <Route
+                path={route.path}
+                key={index}
+                element={
+                  <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
+                    <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
+                  </LoadWrapper>
+                }
+              ></Route>
+            )
+          } else {
+            return <Route key={index} element={<NavLink to="/login">你还有没有登陆好吧！</NavLink>}></Route>
+          }
+          //   return (
+          //     <Route
+          //       key={index}
+          //       path={route.path}
+          //       element={
+          //         <Auth key={index} needAuth={!!route.meta?.auth} path={route.path}>
+          //           <LoadWrapper loading={route.loading} isLazy={typeof route.component.$$typeof === "symbol"}>
+          //             <route.component meta={route.meta}>{route.children && <RouteMap routes={route.children}></RouteMap>}</route.component>
+          //           </LoadWrapper>
+          //         </Auth>
+          //       }
+          //     ></Route>
+          //   )
         }
       })}
-    </Switch>
+    </Routes>
   )
 }
 

src/main.tsx

@@ -1,19 +1,20 @@
-import "@/assets/style/common.scss";
-import store from "@/store";
-import React from "react";
-import ReactDOM from "react-dom";
+import "@/assets/style/common.scss"
+import store from "@/store"
+import React from "react"
+import { createRoot } from "react-dom/client"
 import "@/plugins/i18n"
-import {Provider} from 'react-redux'
-import "virtual:windi-devtools";
-import "virtual:windi.css";
+import { Provider } from "react-redux"
+import "virtual:windi-devtools"
+import "virtual:windi.css"
 
-import Router from "./AppRouter";
+import App from "./App"
 
-ReactDOM.render(
+const container = document.getElementById("root")
+const root = createRoot(container!)
+root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <Router></Router>
+      <App></App>
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+  </React.StrictMode>
+)

src/route.tsx

@@ -25,7 +25,6 @@ export default [
   {
     path: "/about",
     component: lazy(() => import("@/views/About")),
-    exact: false,
     meta: {
       auth: false,
     },
@@ -33,7 +32,6 @@ export default [
     children: [
       {
         path: "/about/test",
-        exact: true,
         meta: {
           auth: false,
         },
@@ -45,7 +43,6 @@ export default [
   {
     path: "/home",
     component: lazy(() => import("@/views/Home")),
-    exact: true,
     loading: () => <Loading color="blue"></Loading>,
     meta: {
       auth: false,
@@ -54,7 +51,6 @@ export default [
   },
   {
     path: "/",
-    exact: true,
     redirect: "/home",
   },
   {
@@ -63,7 +59,6 @@ export default [
   },
   {
     path: "*",
-    exact: false,
     component: Page404,
   },
 ]

src/ui/Auth.tsx

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

src/views/About/index.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { useLocation, Route, Switch } from "react-router-dom"
+import { useLocation } from "react-router-dom"
 
 function Test() {
   return <div>test</div>
@@ -13,9 +13,9 @@ export default function (props: any) {
     <div className="container mx-auto">
       <div>AboutAAAasda </div>
       <div>22{props.children}</div>
-      <Route path="/about/aa" exact={true}>
+      {/* <Route path="/about/aa">
         <Test></Test>
-      </Route>
+      </Route> */}
     </div>
   )
 }

vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import reactRefresh from "@vitejs/plugin-react-refresh";
+import react from "@vitejs/plugin-react-swc";
 import WindiCSS from "vite-plugin-windicss";
 const { resolve } = require("path");
 
@@ -15,5 +15,5 @@ export default defineConfig({
   resolve: {
     alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
   },
-  plugins: [WindiCSS(), reactRefresh()],
+  plugins: [WindiCSS(), react()],
 });