i18n.language为undefined导致跳转URL异常，如何正确初始化i18n？

你遇到的i18n.language为undefined的核心原因是i18next的初始化是异步流程：你引入了i18next-http-backend加载远程翻译资源、i18next-browser-languagedetector执行语言检测，两个操作都需要耗时，路由重定向逻辑触发时i18n还未完成初始化，因此取不到正确的语言值。

方案1：等待i18n初始化完成再挂载应用（最彻底的根解决方案） #

从根源避免初始化未完成时业务逻辑提前执行。

步骤1：调整i18n初始化文件，导出初始化完成的Promise #

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

// 导出init方法返回的Promise，用于判断初始化完成状态
export const i18nInitPromise = i18n
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
    supportedLngs: ['en', 'ar'],
    fallbackLng: 'ar',
    debug: false,
    detection: {
        order: ['path', 'cookie', 'htmlTag'],
        caches: ['cookie'],
    },
    react: { useSuspense: false },
    defaultNS: 'translation',
    backend: {
        loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
    },
});

export default i18n;

步骤2：入口文件等待初始化完成后再渲染根组件 #

以React 18的入口文件index.js为例：

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

// 等i18n初始化完成后再挂载整个应用，保证所有业务逻辑执行时i18n已就绪
i18nInitPromise.then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
})

方案2：给langUrl工具函数加兜底逻辑（兼容极端场景的补充方案） #

就算出现异常初始化失败的场景，也不会生成带undefined的错误路径：

import i18n from './i18n';

export const langUrl = (url) => {
  // 优先级：检测到的语言 > 配置的默认 fallback 语言 > 硬编码兜底语言
  const currentLang = i18n.language || i18n.options.fallbackLng || 'ar';
  return `/${currentLang}/${url}`;
};

额外优化建议 #

因为你的语言检测优先级第一位是路径，可在langUrl中优先直接从当前页面路径提取lang参数，比依赖i18n检测结果更快更稳定：

export const langUrl = (url) => {
  // 直接从路径提取lang，比如路径/en/xxx 可直接提取到en
  const pathLang = window.location.pathname.split('/')[1];
  const supportedLngs = ['en', 'ar'];
  const currentLang = supportedLngs.includes(pathLang) ? pathLang : (i18n.language || i18n.options.fallbackLng || 'ar');
  return `/${currentLang}/${url}`;
};

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