导入i18n.js后React应用崩溃，遇组件挂起错误求助

这个错误是因为react-i18next加载翻译资源的异步操作和React 18的并发渲染机制冲突导致的——当组件同步渲染时，需要等待未加载完成的翻译资源，触发了React的Suspense挂起逻辑，进而引发报错。

下面是几种可行的解决方案：

方案1：用Suspense包裹根组件 #

在你的index.js中，用React的Suspense组件包裹整个应用，给React提供加载状态的fallback内容，这样组件挂起时会显示加载提示而非崩溃：

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './i18n';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Suspense fallback={<div>加载翻译中...</div>}>
      <App />
    </Suspense>
  </React.StrictMode>
);

方案2：在useTranslation中启用wait选项 #

如果是函数组件，可以在调用useTranslation时添加wait: true配置，让组件等待翻译资源加载完成后再渲染：

import { useTranslation } from 'react-i18next';

function YourComponent() {
  const { t } = useTranslation('your-namespace', { wait: true });
  return <div>{t('your-key')}</div>;
}

方案3：同步加载翻译资源 #

如果你的翻译内容体量很小，可以直接把翻译资源内联到i18n.js中，避免异步加载：

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 直接内联翻译资源，无需异步加载
const resources = {
  en: {
    translation: {
      welcome: 'Welcome'
    }
  },
  zh: {
    translation: {
      welcome: '欢迎'
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'zh', // 默认语言
    interpolation: {
      escapeValue: false // React已经处理了XSS，无需额外转义
    }
  });

export default i18n;

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