Vite+React项目中i18next翻译不生效，仅显示键值求助

问题现象 #

在Vite+React项目中集成i18next处理多语言翻译时，页面仅显示翻译键（如heroTitle、heroSubTitle），未加载对应翻译内容。

排查与修复步骤 #

1. 修正I18nextProvider语法错误 #

你的main.jsx中</ I18nextProvider>标签存在空格，这会导致React无法正确识别闭合标签，进而使i18n上下文无法传递到子组件。将其改为：

</I18nextProvider>

同时调整React.Suspense的位置，确保它被包裹在I18nextProvider内部（保证翻译加载时组件正确挂起）：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <React.Suspense fallback='loading...'>
        <Router>
          <App />
        </Router>
      </React.Suspense>
    </I18nextProvider>
  </React.StrictMode>,
)

2. 明确默认命名空间 #

在i18n.js的初始化配置中添加defaultNS: 'translation'，确保i18next默认加载你定义的translation.json命名空间文件：

i18n.init({
  // ...其他配置
  defaultNS: 'translation',
})

3. 验证翻译文件加载路径 #

检查浏览器控制台的网络请求，确认是否成功加载/locales/en/translation.json：

• 若出现404错误，检查文件路径拼写（注意大小写、目录层级，Vite对public目录下的文件路径严格匹配）
• 确认loadPath: '/locales/{{lng}}/{{ns}}.json'与你的文件结构完全对应（public/locales/en/translation.json）

4. 排查语言检测逻辑 #

初始化代码中lng: localStorage.getItem('i18nextLng') || 'en'可能因localStorage中存储了不在whitelist内的语言导致加载失败。可以：

• 清空浏览器localStorage中的i18nextLng键值
• 或在初始化配置中明确语言检测顺序，避免异常语言值影响：

i18n.init({
  // ...其他配置
  detection: {
    order: ['localStorage', 'navigator'],
  },
})

验证修复 #

完成上述修改后，重启Vite开发服务器，刷新页面即可看到翻译内容正常显示。

内容的提问来源于stack exchange，提问作者Xyz.WebDeveloper