第三章、React项目国际化介绍（`react-i18next`）

React项目国际化介绍（react-i18next）

在 React + TypeScript 项目中配置 国际化 (i18n) ，推荐使用主流方案：react-i18next（即 i18next 的 React 适配库）。

一、安装依赖

在项目根目录执行：

npm install i18next react-i18next i18next-browser-languagedetector

二、目录结构推荐

src/
├── i18n/
│   ├── index.ts                # i18n 初始化配置
│   ├── locales/
│   │   ├── en/
│   │   │   └── translation.json
│   │   └── zh/
│   │       └── translation.json
├── components/
│   └── LanguageSwitcher.tsx    # 语言切换组件
├── App.tsx
└── index.tsx

三、i18n 初始化配置

src/i18n/index.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";// 导入语言包
import en from "./locales/en/translation.json";
import zh from "./locales/zh/translation.json";i18n.use(LanguageDetector) // 自动检测用户语言（浏览器设置、localStorage等）.use(initReactI18next) // React 绑定.init({fallbackLng: "en", // 默认语言debug: false,       // 开发时可设为 true 查看加载日志interpolation: {escapeValue: false, // React 已经自动防止 XSS},resources: {en: { translation: en },zh: { translation: zh },},detection: {// 可选：指定检测顺序和缓存方式order: ["localStorage", "navigator"],caches: ["localStorage"],},});export default i18n;

四、语言文件

src/i18n/locales/en/translation.json

{"welcome": "Welcome to our site!","language": "Language","change_language": "Change Language"
}

src/i18n/locales/zh/translation.json

{"welcome": "欢迎来到我们的网站！","language": "语言","change_language": "切换语言"
}

五、在入口文件中加载 i18n

src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./i18n"; ReactDOM.createRoot(document.getElementById("root")!).render(<React.StrictMode><App /></React.StrictMode>
);

六、在组件中使用国际化

src/App.tsx

import React from "react";
import { useTranslation } from "react-i18next";
import LanguageSwitcher from "./components/LanguageSwitcher";const App: React.FC = () => {const { t } = useTranslation();return (<div className="p-8"><h1>{t("welcome")}</h1><p>{t("language")}: {t("change_language")}</p><LanguageSwitcher /></div>);
};export default App;

七、语言切换组件

src/components/LanguageSwitcher.tsx

import React from "react";
import { useTranslation } from "react-i18next";const LanguageSwitcher: React.FC = () => {const { i18n } = useTranslation();const changeLanguage = (lng: string) => {i18n.changeLanguage(lng);};return (<div><button onClick={() => changeLanguage("zh")} className="mr-2">中文</button><button onClick={() => changeLanguage("en")}>English</button></div>);
};export default LanguageSwitcher;