如何在react-i18next中一次性加载后端多命名空间翻译资源

你可以无需引入额外的i18n后端插件，直接在i18n实例初始化前手动拉取全量翻译资源，再注入到实例中即可，完整流程如下：

1. 定义公共配置常量 #

先统一定义项目的语言、命名空间、后端接口基础地址，方便后续维护：

// src/i18n/config.js
// 替换为你的后端实际基础地址
const BASE_URL = 'https://your-api-domain.com'
// 项目支持的所有语言列表
export const SUPPORTED_LANGS = ['zh-CN', 'en-US', 'ja-JP']
// 所有翻译命名空间列表
export const ALL_NAMESPACES = ['Common', 'Reports', 'Dashboard']
export { BASE_URL }

2. 封装全量翻译拉取方法 #

批量请求所有语言+所有命名空间的翻译接口，拼接为i18n支持的资源格式：

// src/i18n/utils.js
import { BASE_URL, SUPPORTED_LANGS, ALL_NAMESPACES } from './config'

export const fetchAllTranslations = async () => {
  const resources = {}
  // 生成所有请求的并发任务
  const requestTasks = SUPPORTED_LANGS.flatMap(lang => {
    return ALL_NAMESPACES.map(async ns => {
      try {
        const res = await fetch(`${BASE_URL}/locales/${lang}/${ns}.json`)
        const translation = await res.json()
        if (!resources[lang]) resources[lang] = {}
        resources[lang][ns] = translation
      } catch (e) {
        // 单个接口报错兜底，避免整体初始化失败
        console.warn(`加载翻译失败：${lang} - ${ns}`, e)
        if (!resources[lang]) resources[lang] = {}
        resources[lang][ns] = {}
      }
    })
  })
  // 等待所有请求完成
  await Promise.all(requestTasks)
  return resources
}

3. 调整i18n初始化逻辑 #

改为异步初始化，等待翻译资源拉取完成后再注入到i18n实例：

// src/i18n/index.js
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import { fetchAllTranslations, SUPPORTED_LANGS, ALL_NAMESPACES } from './config'

export const initI18n = async () => {
  // 先拉全量翻译资源
  const resources = await fetchAllTranslations()

  i18n
    .use(initReactI18next)
    .init({
      // 直接注入全量翻译资源
      resources,
      // 默认语言，可根据本地存储/浏览器语言动态获取
      lng: 'zh-CN',
      fallbackLng: 'zh-CN',
      ns: ALL_NAMESPACES,
      defaultNS: 'Common',
      interpolation: {
        escapeValue: false // React默认防XSS，无需开启
      }
      // 其余你原有i18n配置项直接保留即可
    })
  return i18n
}

export default i18n

4. 调整项目入口逻辑 #

等i18n初始化完成后再渲染根组件，避免页面渲染时翻译未加载出现空值：

// src/index.js 项目入口文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { initI18n } from './i18n'

const bootstrap = async () => {
  // 先初始化i18n再渲染应用
  await initI18n()
  const root = ReactDOM.createRoot(document.getElementById('root'))
  root.render(<App />)
}

bootstrap()

验证使用 #

配置完成后你可以在项目任意位置按照要求的格式调用翻译：

import { useTranslation } from 'react-i18next'

const DemoComponent = () => {
  const { t } = useTranslation()
  // 命名空间前缀加翻译key即可正常调用
  return <p>{t('Common:com-description')}</p>
}

可选优化 #

如果你的翻译资源总量较大，全量拉取所有语言的翻译会影响首屏加载速度，可以调整拉取逻辑，只拉取当前用户需要使用的语言的所有命名空间翻译，拉取耗时会大幅降低。

内容的提问来源于stack exchange，提问作者margherita pizza