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

分步教程：使用 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：组织翻译文件

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

目录结构：

src/
  translations/
    en/
      global.json
    es/
      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 中初始化翻译设置：

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）：

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）：

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，添加语言切换按钮：

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;

步骤 6：测试应用

1. 启动应用：

   npm start
   # 或
   yarn start
   

2. 点击 English 或 Español 按钮，观察文本即时切换！

可选增强功能

1. 保存语言偏好：使用 localStorage 存储用户选择的语言。
2. 扩展更多语言：按相同模式添加新语言（如法语 fr）。
3. 拆分命名空间：将翻译文件按模块拆分（如 header.json, home.json）。

最终成果

你已经构建了一个支持动态切换英语和西班牙语的 React 应用！全球用户现在可以使用自己偏好的语言访问你的应用 🌍。

欢迎在评论区告诉我你希望看到的下一个 React.js 教程主题！ 🚀