i18n

package-lock.json

@@ -776,6 +776,30 @@
         "react-is": "^16.7.0"
       }
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.nlark.com/html-parse-stringify/download/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha1-38EBc0fOn3fIFBpQfyMwQMWcVdI=",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "i18next": {
+      "version": "20.3.4",
+      "resolved": "https://registry.nlark.com/i18next/download/i18next-20.3.4.tgz",
+      "integrity": "sha1-XgVSSouqF7v5m4nNtCfTpoQGqmQ=",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "6.1.2",
+      "resolved": "https://registry.nlark.com/i18next-browser-languagedetector/download/i18next-browser-languagedetector-6.1.2.tgz",
+      "integrity": "sha1-aFZaKLkpy8mKtqVoJu8vrw6Sf/g=",
+      "requires": {
+        "@babel/runtime": "^7.14.6"
+      }
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1013,6 +1037,15 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-i18next": {
+      "version": "11.11.3",
+      "resolved": "https://registry.nlark.com/react-i18next/download/react-i18next-11.11.3.tgz?cache=0&sync_timestamp=1626416365115&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-i18next%2Fdownload%2Freact-i18next-11.11.3.tgz",
+      "integrity": "sha1-ONCDuwecPm7jdrMyGw1uQJ15j2g=",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -1428,6 +1461,11 @@
         }
       }
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/void-elements/download/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
     "windicss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/windicss/-/windicss-3.1.3.tgz",

package.json

@@ -8,8 +8,11 @@
   "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",

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

@@ -2,7 +2,7 @@ import "@/assets/style/common.scss";
 import store from "@/store";
 import React from "react";
 import ReactDOM from "react-dom";
-
+import "@/plugins/i18n"
 import {Provider} from 'react-redux'
 import "virtual:windi-devtools";
 import "virtual:windi.css";

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/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="text" value={usename} onChange={(e)=>setUsername(e.target.value)} placeholder={t('login.username_placeholder')} />
-            <input type="password" placeholder="Password" autoComplete="" />
+            <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>