使用react-i18next能否从src文件夹加载翻译文件？

当然可以，有两种常见方案实现：

方案一：调整HttpApi路径（静态资源方式） #

如果你的翻译文件存在src/locales目录下（比如src/locales/fr/home.json），只需修改backend配置里的loadPath，指向src内的路径即可。不过要确保构建工具（如Vite、Create React App）能将该目录的文件作为静态资源输出，否则会出现加载失败的情况。

修改后的配置示例：

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(HttpApi)
  .use(initReactI18next)
  .init({
    supportedLngs : ['fr', 'en'], // 应用支持的语言
    fallbackLng: 'fr', // 默认语言
    ns:['navBar', 'home'], // 对应不同内容的加载文件
    defaultNS : 'home', // 默认加载的文件
    fallbackNS: 'navBar', 
    detection : {
      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie'], // 缓存用户语言的位置
    },
    backend: {
      loadPath: '/src/locales/{{lng}}/{{ns}}.json' // 修改为src下的翻译文件路径
    }
  });

方案二：直接导入翻译文件（更可靠） #

这种方式不需要依赖HttpApi加载远程文件，直接从src导入翻译资源并注入到i18n配置中，避免路径访问问题：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// 从src目录导入翻译文件
import frHome from './locales/fr/home.json';
import frNavBar from './locales/fr/navBar.json';
import enHome from './locales/en/home.json';
import enNavBar from './locales/en/navBar.json';

// 整理资源对象
const resources = {
  fr: {
    home: frHome,
    navBar: frNavBar
  },
  en: {
    home: enHome,
    navBar: enNavBar
  }
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    supportedLngs : ['fr', 'en'],
    fallbackLng: 'fr',
    ns:['navBar', 'home'],
    defaultNS : 'home',
    fallbackNS: 'navBar',
    detection : {
      order: ['cookie', 'htmlTag', 'localStorage', 'path', 'subdomain'],
      caches: ['cookie'],
    }
  });

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