使用i18next-react切换语言后无法正确修改URL路径，出现undefined错误

• 静态定义的baseUrl无法响应语言变更：你将baseUrl定义为静态常量，仅会在模块首次加载时计算一次i18n.language的值，后续语言切换、i18n初始化未完成时取值都会出现异常，未初始化时i18n.language为undefined，直接拼接就会出现/undefined/page1这类路径。
• languageChanged事件的路径替换逻辑错误：String.replace()方法仅传入匹配规则、未传入替换值时，会默认将匹配内容替换为undefined，同时原有逻辑仅处理了英文（兜底语言）的路径移除，没有覆盖其他语言切换的场景。

1. 调整baseUrl定义 #

不要使用静态常量，改为动态取值的函数或React自定义Hook，保证每次取值都是当前最新的语言版本，同时添加兜底逻辑避免未初始化取值异常：

普通函数写法（适用非组件场景） #

export const getBaseUrl = () => {
  const currentLang = i18n.language || 'en'
  return currentLang === 'en' ? '' : `/${currentLang}`
}

React Hook写法（适用组件场景，自动响应语言变更触发重渲染） #

import { useTranslation } from 'react-i18next'

export const useBaseUrl = () => {
  const { i18n } = useTranslation()
  return i18n.language === 'en' ? '' : `/${i18n.language}`
}

组件内调用方式：

// 引入自定义Hook
const baseUrl = useBaseUrl()
// 链接写法
<a className='item' href={`${baseUrl}/`}>Home</a>

2. 修正languageChanged事件逻辑 #

补全路径替换逻辑，覆盖所有语言切换场景，同时避免重复跳转：

i18n.on('languageChanged', function (lng) {
  const currentPath = window.location.pathname
  const fallbackLng = i18n.options.fallbackLng[0]
  // 移除路径中已有的语言前缀
  const pathWithoutLang = currentPath.replace(/^\/(en|de|it|es)/, '')
  const newPath = lng === fallbackLng 
    ? (pathWithoutLang || '/') 
    : `/${lng}${pathWithoutLang}`
  // 路径无变化时不执行跳转，避免死循环
  if (newPath !== currentPath) {
    window.location.replace(newPath)
  }
});

3. 优化初始化逻辑（可选） #

等待i18n初始化完成后再渲染根组件，避免初始化阶段取值异常：

// 项目入口文件代码示例
import i18n from './i18n'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

i18n.init().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />)
})

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