react 多语言如何配置

配置 React 多语言支持

React 项目可以通过 react-i18next 库实现多语言支持。以下是详细配置步骤：

安装依赖

安装 react-i18next 和 i18next 核心库：

npm install react-i18next i18next --save

如果需要从文件或后端加载翻译资源，可以安装 i18next-http-backend：

npm install i18next-http-backend --save

初始化 i18n

在项目中创建 i18n.js 文件，配置语言初始化逻辑：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 本地翻译资源
const resources = {
  en: {
    translation: {
      welcome: 'Welcome',
    },
  },
  zh: {
    translation: {
      welcome: '欢迎',
    },
  },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // 默认语言
    fallbackLng: 'en', // 回退语言
    interpolation: {
      escapeValue: false, // React 已处理 XSS
    },
  });

export default i18n;

在 React 组件中使用

通过 useTranslation Hook 或 withTranslation HOC 使用翻译功能：

import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default App;

按需加载翻译文件

通过 i18next-http-backend 动态加载语言文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json', // 文件路径格式
    },
  });

文件目录结构示例：

public/
  locales/
    en/
      translation.json
    zh/
      translation.json

命名空间支持

将翻译拆分为多个命名空间（如 common.json、dashboard.json）：

i18n.init({
  ns: ['common', 'dashboard'],
  defaultNS: 'common',
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

在组件中指定命名空间：

const { t } = useTranslation('dashboard');

高级功能

1. 语言检测
   使用 i18next-browser-languagedetector 自动检测用户浏览器语言：

   npm install i18next-browser-languagedetector --save

   import LanguageDetector from 'i18next-browser-languagedetector';
   i18n.use(LanguageDetector).init({ /* ... */ });

2. 复数与插值
   支持复数形式和变量插值：

   {
     "items": "{{count}} item",
     "items_plural": "{{count}} items"
   }

   t('items', { count: 5 }); // 输出 "5 items"

通过以上步骤，可以实现 React 项目的多语言支持，并支持动态切换语言、按需加载翻译文件等高级功能。