React-i18next修改翻译文件路径问题咨询

当然可以修改，只需调整i18n初始化配置里的翻译文件路径规则，或修改手动导入的路径即可，分两种常见场景说明：

场景1：使用i18next-http-backend加载静态翻译文件 #

如果项目通过i18next-http-backend插件加载静态JSON文件，修改backend配置中的loadPath参数即可：

原配置示例 #

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

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      // 原路径规则
      loadPath: '/locales/{{lng}}/translation.json'
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

修改后的配置 #

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

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      // 新路径规则，匹配lib/en.i18n.json格式
      loadPath: '/lib/{{lng}}.i18n.json'
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

场景2：手动导入翻译文件 #

如果直接在代码中手动导入翻译文件，修改import语句的路径，并调整resources配置即可：

原配置示例 #

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './locales/en/translation.json';
import deTranslation from './locales/de/translation.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslation },
      de: { translation: deTranslation }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

修改后的配置 #

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './lib/en.i18n.json';
import deTranslation from './lib/de.i18n.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslation },
      de: { translation: deTranslation }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

注意：修改路径后，确保翻译文件确实放在lib目录下，文件名和配置中的规则完全匹配（比如en.i18n.json、de.i18n.json）。

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