React项目中如何拆分i18n多语言JSON文件并引用？

当然可以把job-types这类模块的翻译拆分到单独文件里，下面给你两种实用的实现方式：

方案一：JS层面合并JSON文件（快速适配现有代码） #

这种方法不需要改动i18n核心配置，只需要在导入翻译文件时手动合并拆分的内容：

1. 拆分文件
   新建en.job-types.json文件，把原来en.json里的job-types内容移进去：

   {
     "remote": "remote",
     "temporary": "temporary",
     "fulltime": "fulltime",
     "parttime": "parttime"
   }
   

   然后修改原en.json，删除job-types字段。其他语言（波斯语、阿拉伯语）也按同样方式拆分对应的job-types内容到单独文件。

2. 合并翻译对象
   在i18n.js里导入新的拆分文件，把它合并到主翻译对象中：

   import translationEN from './locales/en.json';
   import enJobTypes from './locales/en.job-types.json';
   import translationFA from './locales/fa.json';
   import faJobTypes from './locales/fa.job-types.json';
   import translationAR from './locales/ar.json';
   import arJobTypes from './locales/ar.job-types.json';
   
   // 给各语言的主翻译对象添加job-types字段
   translationEN['job-types'] = enJobTypes;
   translationFA['job-types'] = faJobTypes;
   translationAR['job-types'] = arJobTypes;
   
   const resources = {
     en: { translation: translationEN },
     fa: { translation: translationFA },
     ar: { translation: translationAR }
   };
   
   // 后续i18n初始化代码保持不变
   

3. 使用方式不变
   依然用原来的键路径调用翻译：

   t('job-types.remote')
   

方案二：使用i18next命名空间（官方推荐的模块化方案） #

这是i18next官方推荐的拆分翻译的方式，适合大规模项目的模块化管理：

1. 按命名空间组织文件
   调整你的翻译文件结构，比如：

   locales/
     en/
       translation.json  // 原来的en.json内容（去掉job-types）
       job-types.json    // 拆分出来的job-types翻译
     fa/
       translation.json
       job-types.json
     ar/
       translation.json
       job-types.json
   

2. 修改i18n配置
   移除手动定义的resources，改用Backend插件自动加载命名空间文件，调整init配置：

   i18n
     .use(Backend)
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
       fallbackLng: 'en',
       debug: true,
       interpolation: {
         escapeValue: false,
       },
       // 声明需要加载的命名空间
       ns: ['translation', 'job-types'],
       // 设置默认命名空间（平时调用t()默认用这个）
       defaultNS: 'translation',
       // 配置Backend加载路径，根据你的实际文件结构调整
       backend: {
         loadPath: './locales/{{lng}}/{{ns}}.json',
       }
     });
   

3. 调用翻译的方式

   • 调用默认命名空间的翻译（比如原来的Ascending）：

     t('Ascending')
     

   • 调用job-types命名空间的翻译，有两种写法：

     // 写法1：指定命名空间参数
     t('remote', { ns: 'job-types' })
     // 写法2：用命名空间:键的格式
     t('job-types:remote')
     

   • 如果某个组件频繁用到job-types的翻译，可以在useTranslation钩子中提前声明命名空间：

     const { t } = useTranslation(['translation', 'job-types']);
     // 之后直接调用t('remote')即可（重名时优先用第一个命名空间的键）
     

内容的提问来源于stack exchange，提问作者Javad-M