React中i18next-http-backend无法从Public文件夹加载翻译JSON文件

你遇到的核心问题是SPA路由拦截了静态资源请求：React单页应用的服务器会将所有未匹配到的路径都返回index.html（状态码200），导致你访问/locales/{{lng}}/translation.json时，实际拿到的是React的入口页面而非JSON文件。以下是分场景的解决方案：

1. 开发环境（Create React App） #

• 先确认locales文件夹的位置：必须直接放在项目根目录的public文件夹下，路径结构应为public/locales/en/translation.json（以英文为例）。
• 若路径正确仍有问题，尝试：
  • 清除浏览器缓存（Ctrl+Shift+R强制刷新）
  • 重启React开发服务器
  • 验证静态资源访问：在public下新建test.txt，访问http://localhost:3000/test.txt，若能正常显示内容，说明静态资源服务正常，检查locales文件夹/文件名的拼写（注意大小写）。

2. 生产环境部署 #

需要调整服务器配置，让静态文件请求优先于SPA路由：

Nginx 配置 #

在你的站点配置中添加try_files规则，确保服务器先查找静态文件，找不到再返回React入口页：

location / {
  try_files $uri $uri/ /index.html;
}

Apache 配置 #

在项目根目录的.htaccess文件中添加以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
# 优先返回存在的文件/文件夹
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 否则路由到index.html
RewriteRule . /index.html [L]

3. 验证i18next配置细节 #

确保i18next-http-backend已正确安装并初始化：

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, // React已自动处理XSS，无需开启
    },
  });

export default i18n;

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