如何在同一个应用中运行2个React-i18Next实例？

算力阿峰

2026-9-26

实现方案

首先明确：react-i18next 完全支持同一应用内运行多独立实例，你代码里的核心问题出在实例初始化和Provider传递的逻辑上，以下是修正步骤：

第一步：创建独立实例时必须完整初始化，不能只调用createInstance，要链式调用init方法配置各自的翻译资源、默认语言等参数，两个实例的配置要完全隔离，不要复用同一个资源对象。

// 实例1初始化示例
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const instance1 = i18n.createInstance();
instance1.use(initReactI18next).init({
  lng: 'zh',
  resources: {
    zh: { translation: { title: '实例1的中文标题' } }
  }
  // 其他配置独立填写
});

// 实例2初始化示例
const instance2 = i18n.createInstance();
instance2.use(initReactI18next).init({
  lng: 'en',
  resources: {
    en: { translation: { title: 'Instance2 English Title' } }
  }
  // 完全独立的配置项
});

第二步：使用I18nextProvider包裹对应业务模块时，必须明确传递i18n属性为对应的实例，不要漏传或者错传默认的全局i18n实例：

// 业务分区示例
function App() {
  return (
    <>
      <I18nextProvider i18n={instance1}>
        <ModuleA /> {/* 这个模块内所有useTranslation调用默认使用instance1 */}
      </I18nextProvider>
      <I18nextProvider i18n={instance2}>
        <ModuleB /> {/* 这个模块内所有useTranslation调用默认使用instance2 */}
      </I18nextProvider>
    </>
  )
}