youtube_collection_web/package-lock.json

@@ -6824,6 +6824,14 @@
         }
       }
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
     "html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
@@ -6942,6 +6950,14 @@
       "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "i18next": {
+      "version": "23.11.0",
+      "resolved": "https://registry.npmmirror.com/i18next/-/i18next-23.11.0.tgz",
+      "integrity": "sha512-VwFtlgy2LDbY0Qs6VfekIm6mv5/JmSJrtBf4aszl7Vby8+GcBlri0/7dkMZXmzTfiBMPUPBOmYCdQK7K4emkGQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -11283,6 +11299,15 @@
       "resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-i18next": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-14.1.0.tgz",
+      "integrity": "sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
@@ -12971,6 +12996,11 @@
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

youtube_collection_web/package.json

@@ -8,8 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.16.1",
     "axios": "^1.6.8",
+    "i18next": "^23.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

youtube_collection_web/src/App.js

@@ -1,34 +1,20 @@
 import './App.css';
-import { Link, Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import Home from './components/Home';
-import { Button } from 'antd';
+import Login from './components/Login.js';
+import Home1 from './components/Home1.js';
 
 
-const Categories = () => (
-  <div>
-    <h2>Categories</h2>
-    <p>Browse items by category.</p>
-  </div>
-);
-
 function App() {
-  const navigate = useNavigate();
-  const a = 1;
-  function GoHome(){
-    alert("go home")
-    navigate('/home?a=' + a)
-  }
   return (
     <div className="App">
-      <div>
-        <br></br>
-        <Link to="/home">Home</Link>
-        <Link to="/categories">categories</Link>
-        <Button type="primary" onClick={() => GoHome}>GO HOME</Button>
-      </div>
       <Routes>
-        <Route path="/home" element={<Home />} />
-        <Route path="/categories" element={<Categories />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/home/" element={<Home />} >
+          <Route path="1" element={<Home1 />} />
+        </Route>
+
+        <Route path="/" element={<Navigate replace to="/login" />} />;
       </Routes>
     </div>
   );

youtube_collection_web/src/assets/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+	"hello":"Hello"
+}

youtube_collection_web/src/assets/locales/resources.js

@@ -0,0 +1,16 @@
+import enUS from './en-US.json';
+import zh from './zh-CN.json';
+
+const resources = {
+  'en-US': {
+    translation: enUS,
+  },
+  'zh-CN': {
+    translation: zh,
+  },
+  zh: {
+    translation: zh,
+  },
+};
+
+export default resources;

youtube_collection_web/src/assets/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+	"hello":"你好"
+}

youtube_collection_web/src/components/Home.js

@@ -1,11 +1,20 @@
 import React from 'react'
-
+import { Link,Outlet  } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 function Home() {
+    const [t, i18n] = useTranslation()
+    const toggleI18n = () => {
+        const locale = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
+        i18n.changeLanguage(locale)
+      }
     return (
         <div>
             <h2>Home</h2>
-            <p>Welcome to our homepage!</p>
+            <p>{t('hello')}</p>
+            <button onClick={toggleI18n}> i18n切换 </button>
+            <Link to="1">Home1</Link>
+            <Outlet />
         </div>
     )
 }

youtube_collection_web/src/components/Home1.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+
+function Home1() {
+    return (
+        <div>
+            <h2>Home11111</h2>
+            <p>Welcome to our homepage!</p>
+        </div>
+    )
+}
+
+export default Home1

youtube_collection_web/src/components/Login.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom';
+import { Button } from 'antd'
+
+function Login() {
+    const navigate = useNavigate();
+    function button_onclick() {
+        navigate('/home')
+    }
+    return (
+        <div>
+
+            <Button onClick={button_onclick}>Home</Button>
+        </div>
+    )
+}
+
+export default Login

youtube_collection_web/src/i18n.ts

@@ -0,0 +1,27 @@
+import { initReactI18next } from 'react-i18next';
+import i18n from 'i18next';
+import resources from './assets/locales/resources.js';
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
+
+let localLang = sessionStorage.getItem('lang');
+const browserLang = navigator.language;
+if (!localLang) {
+  localLang = browserLang === 'zh-CN' ? 'zh-CN' : 'en-US';
+}
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: localLang, // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

youtube_collection_web/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
+import './i18n.ts'  // 新增：导入i18n
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(