当前位置：首页 > React

react 多语言如何配置

2026-03-11 12:46:09React

安装依赖

安装 react-i18next 和 i18next 作为多语言支持的核心库。

npm install react-i18next i18next

初始化 i18n 配置

创建 i18n.js 文件，配置语言资源和初始化设置。

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

// 语言资源
const resources = {
  en: {
    translation: {
      welcome: 'Welcome',
      button: 'Click me',
    },
  },
  zh: {
    translation: {
      welcome: '欢迎',
      button: '点击我',
    },
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // 默认语言
  fallbackLng: 'en', // 回退语言
  interpolation: {
    escapeValue: false, // 不转义 HTML
  },
});

export default i18n;

在根组件中引入 i18n

在应用的入口文件（如 App.js 或 index.js）中引入 i18n.js。

react 多语言如何配置

import './i18n';

使用翻译功能

在组件中通过 useTranslation Hook 或 withTranslation HOC 实现多语言切换。

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

function MyComponent() {
  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 MyComponent;

按需加载语言文件

对于大型项目，可以动态加载语言文件以减少初始加载时间。

react 多语言如何配置

// i18n.js 中配置动态加载
i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

// 动态加载语言资源
i18n.addResourceBundle('en', 'translation', {
  welcome: 'Welcome',
});
i18n.addResourceBundle('zh', 'translation', {
  welcome: '欢迎',
});

命名空间支持

通过命名空间（namespace）拆分翻译文件，适合模块化项目。

// 配置命名空间
i18n.init({
  ns: ['common', 'moduleA'],
  defaultNS: 'common',
});

// 使用命名空间翻译
t('moduleA:title');

测试与调试

使用 i18next-http-backend 加载远程翻译文件，或通过 i18next-browser-languagedetector 自动检测用户语言。

npm install i18next-http-backend i18next-browser-languagedetector

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({ /* 配置 */ });