React项目导入i18n到App组件后刷新页面组件消失问题求助

问题核心原因与修复方案 #

你遇到的刷新后组件消失问题是由i18n配置语法错误、时序冲突、资源缺失三类问题共同导致的，可按以下步骤逐一修复：

• 首先修正LanguageDetector配置的语法错误：你的order数组在querystring和sessionStorage之间多了一个多余逗号，生成了空元素，会导致语言检测逻辑抛出异常，直接阻断页面渲染
• 删除i18n初始化配置中手动指定的lng: 'en'参数：你已经启用了自动语言检测，手动指定lng会覆盖检测结果，引发状态不一致冲突，兜底逻辑已经由fallbackLng: 'en'覆盖，不需要额外配置
• 检查翻译资源文件是否存在：你使用了i18next-http-backend插件，默认会请求public/locales/[语言代码]/translation.json路径的翻译文件，如果对应路径的文件不存在，资源加载失败会触发渲染中断，请确保项目存在如下目录结构：

public/
└── locales/
    ├── en/
    │   └── translation.json
    ├── es/
    │   └── translation.json
    └── ar/
        └── translation.json

• 调整i18n导入时机：不要在App组件内部导入i18n，改为在入口文件index.jsx/main.jsx最顶部导入，确保i18n初始化完成后再渲染App组件，入口文件参考写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './i18n'; // 优先导入i18n配置
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

修复后完整的i18n.js代码 #

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const languages = ["en",  "es", "ar"]

const options = {
    order: [ 'localStorage', 'cookie', 'querystring', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
    lookupQuerystring: 'lng',
    lookupCookie: 'i18next',
    lookupLocalStorage: 'i18nextLng',
    lookupSessionStorage: 'i18nextLng',
    lookupFromPathIndex: 0,
    lookupFromSubdomainIndex: 0,
    caches: ['localStorage', 'cookie'],
    excludeCacheFor: ['cimode'],
    cookieMinutes: 10,
    cookieDomain: 'myDomain',
    htmlTag: document.documentElement,
    cookieOptions: { path: '/', sameSite: 'strict' }
}

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        debug: true,
        whitelist: languages,
        detection: options,
        interpolation: {
            escapeValue: false,
        }
    });

export default i18n;

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