add

package.json

@@ -6,27 +6,29 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "classnames": "^2.3.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "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/assets/locales/en-us.json

@@ -0,0 +1,10 @@
+{
+  "login":{
+    "title": "Bronze Age 2022",
+    "username_placeholder": "Username",
+    "password_placeholder": "Password",
+    "btnText": "Login"
+  },
+  "home":"Bronze Age 2021",
+  "welcome":"Welcome To Home"
+}

src/assets/locales/zh-cn.json

@@ -0,0 +1,10 @@
+{
+  "login":{
+    "title": "青铜时代2022",
+    "username_placeholder": "用户名",
+    "password_placeholder": "密码",
+    "btnText": "登录"
+  },
+  "home":"青铜时代2021",
+  "welcome":"欢迎来首页"
+}

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 App from "./App"
 
-import Router from "./AppRouter";
-
-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/plugins/i18n/index.tsx

@@ -0,0 +1,28 @@
+import LanguageDetector from "i18next-browser-languagedetector"
+import i18n from "i18next"
+import enUsTrans from "@/assets/locales/en-us.json"
+import zhCnTrans from "@/assets/locales/zh-cn.json"
+import { initReactI18next } from "react-i18next"
+
+i18n
+  .use(LanguageDetector) //嗅探当前浏览器语言
+  .use(initReactI18next) //init i18next
+  .init({
+    //引入资源文件
+    resources: {
+      en: {
+        translation: enUsTrans,
+      },
+      zh: {
+        translation: zhCnTrans,
+      },
+    },
+    //选择默认语言，选择内容为上述配置中的key，即en/zh
+    fallbackLng: "zh",
+    debug: false,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  })
+
+export default i18n

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

src/views/Login/index.tsx

@@ -1,32 +1,48 @@
-import React from "react"
+import React, { useRef } from "react"
 import cn from "classnames"
 import style from "./index.module.scss"
 import { useLocation, Route, Switch } from "react-router-dom"
 import { useState } from "react"
 import Bubbles from "@/components/Loading/Bubbles"
+import { Trans, Translation, useTranslation } from "react-i18next"
 
 export default function Login(props: any) {
   const [isSuccess, setIsSuccess] = useState(false)
-  const [WelcomeText, setWelcomeText] = useState("青铜时代2021")
+  const [usename, setUsername] = useState("23")
+  const [password, setPassword] = useState("")
+  const { t ,i18n} = useTranslation()
 
   function clickLogin(event: any) {
     event.preventDefault()
+
     setIsSuccess(true)
     setTimeout(() => {
+      setUsername('')
+      setPassword('')
       setIsSuccess(false)
     }, 2000)
   }
 
   return (
     <div className={cn(style.login, style.page)}>
+
+      <div style={{background:"red"}}>
+        <button onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>{i18n.language=='en'?'zh':'en'}</button>
+        <h1>{t('home')}</h1>
+        <h1>{usename}</h1>
+        <h1>{password}</h1>
+        <h2><Trans>home</Trans></h2>
+        <Translation>{t => <h3>{t('home')}</h3>}</Translation>
+      </div>
+
       <div className={cn(style.wrapper, isSuccess ? style["form-success"] : "")}>
         <div className={cn(style.container)}>
-          <h1>{WelcomeText}</h1>
+          <h1><Trans>login.title</Trans></h1>
           <form className={cn(style.form)}>
-            <input type="text" placeholder="Username" />
-            <input type="password" placeholder="Password" autoComplete="" />
+            <input type="text" value={usename} onChange={(e)=>setUsername(e.target.value)} placeholder={t('login.username_placeholder')} />
+            <input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} placeholder={t('login.password_placeholder')} autoComplete="" />
             <button type="submit" id={cn(style["login-login"])} onClick={clickLogin}>
-              Login
+              <Trans>login.btnText</Trans>
             </button>
           </form>
         </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()],
 });