react-i18next useTranslation钩子加载时先显示键名而非翻译内容的解决方案咨询

你遇到的这个“闪键名”问题，本质是因为你用了i18next-xhr-backend异步加载翻译文件，组件在翻译资源还没加载完成时就已经渲染了，所以先显示了原始的键名，等资源加载完毕后才更新为翻译内容。下面给你几个实用的解决方案，按需选择：

方案1：开启Suspense等待翻译加载 #

这是React生态里处理异步资源的标准方式，虽然你之前把useSuspense设为了false，但开启它就能让组件等待翻译就绪后再渲染：

第一步：修改i18n配置 #

把react.useSuspense改为true：

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    lng: "pt",
    fallbackLng: "pt",
    debug: false,
    react: {
      useSuspense: true // 这里改为true
    },
    interpolation: {
      escapeValue: false
    }
  })

第二步：用Suspense包裹你的组件 #

在路由或者父组件中，用React.Suspense把Home组件包起来，同时设置一个加载占位（比如加载提示）：

import { Suspense } from 'react';
import Home from './Home';

// 比如在路由配置里
<Suspense fallback={<div>Carregando...</div>}>
  <Route path="/home" component={Home} />
</Suspense>

这样组件会等到翻译资源加载完成后才渲染，不会再显示键名。

方案2：预加载翻译后再渲染整个应用 #

如果你不想用Suspense，可以在应用初始化阶段，先等待i18n完成初始化和翻译加载，再渲染根组件：

修改你的入口文件（比如index.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import i18n from './path/to/your/i18n/config';
import App from './App';

// 等待i18n初始化完成
i18n.init().then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
});

这样整个应用会在翻译资源准备好之后才开始渲染，从根源避免了闪键名的问题。

方案3：给useTranslation添加wait选项 #

如果你保持useSuspense: false，可以在调用useTranslation时传入wait: true，让钩子等待翻译加载完成再返回可用的t函数：

修改Home组件的useTranslation调用：

const { t } = useTranslation(undefined, { wait: true });

这个方式会让组件在翻译加载完成前不渲染翻译内容，你也可以结合自定义加载状态来优化用户体验。

方案4：手动判断加载状态 #

你也可以在组件内直接判断i18n是否初始化完成，手动控制渲染内容：

import { useTranslation } from 'react-i18next'

function Home({ history }: PropsType) {
  const { t, i18n } = useTranslation()
  
  // 如果i18n还没初始化完成，显示加载提示
  if (!i18n.isInitialized) {
    return <div>Carregando...</div>;
  }

  return (
    <span>{t('home.title')}</span>
  )
}

这些方案都能解决你遇到的问题，推荐优先考虑方案1或方案2，它们更符合React和react-i18next的设计理念。

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