分步教程：使用 i18next 本地化 React 网站

在这里插入图片描述

通过本指南学习如何为 React 应用添加多语言支持，实现动态语言切换和翻译管理。

前置条件

基础的 React.js 知识
已安装 Node.js 和 npm/yarn
通过 create-react-app 创建的 React 项目

步骤 1：安装所需库

安装翻译管理工具 i18next 和 react-i18next：

npm install i18next react-i18next
# 或
yarn add i18next react-i18next

步骤 2：组织翻译文件

在 src 目录下创建 translations 文件夹。
在 translations 内按语言创建子文件夹（如 en 英语，es 西班牙语）。
在每个语言文件夹中添加 global.json 文件。

目录结构：

src/translations/en/global.jsones/global.json

示例：英语翻译文件（en/global.json）：

{"header": {"welcome": "Welcome to My App!"},"home": {"title": "Home Page","body": "This app supports multiple languages."}
}

西班牙语翻译文件（es/global.json）：

{"header": {"welcome": "¡Bienvenido a Mi Aplicación!"},"home": {"title": "Página de Inicio","body": "Esta aplicación soporta múltiples idiomas."}
}

步骤 3：配置 i18next

在 src/index.js 中初始化翻译设置：

javascript">import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslations from './translations/en/global.json';
import esTranslations from './translations/es/global.json';// 初始化 i18next
i18n.use(initReactI18next).init({resources: {en: { global: enTranslations },  // "global" 是命名空间es: { global: esTranslations }},lng: 'en', // 默认语言fallbackLng: 'en',interpolation: {escapeValue: false // 防止 XSS 攻击}
});ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

步骤 4：创建可复用组件

1. 头部组件（src/components/Header.js）：

javascript">import React from 'react';
import { useTranslation } from 'react-i18next';const Header = () => {const { t } = useTranslation('global'); // 使用 "global" 命名空间return <h1>{t('header.welcome')}</h1>;
};export default Header;

2. 首页组件（src/components/Home.js）：

javascript">import React from 'react';
import { useTranslation } from 'react-i18next';const Home = () => {const { t } = useTranslation('global');return (<div><h2>{t('home.title')}</h2><p>{t('home.body')}</p></div>);
};export default Home;

步骤 5：实现语言切换器

更新 src/App.js，添加语言切换按钮：

javascript">import React from 'react';
import { useTranslation } from 'react-i18next';
import Header from './components/Header';
import Home from './components/Home';const App = () => {const { i18n } = useTranslation();const changeLanguage = (lng) => {i18n.changeLanguage(lng); // 更新应用语言};return (<div><Header /><Home /><button onClick={() => changeLanguage('en')}>English</button><button onClick={() => changeLanguage('es')}>Español</button></div>);
};export default App;