React Router + i18next本地化URL切换语言后语言路径未更新问题

问题根因 #

你遇到的问题是切换语言后，导航链接的语言前缀（比如/en/）没跟着更新，只修改了路径的最后翻译段。本质原因是生成NavLink的to属性时，没有基于当前选中的新语言重新构建完整路径，而是在旧URL的基础上仅替换了最后一段，导致语言前缀始终保留旧值。

具体修复步骤 #

1. 确保当前语言状态可被导航组件获取 #

不管用Context、Redux还是全局状态管理工具，要让渲染导航链接的组件（比如Home组件）能拿到切换后的当前语言（如fr）。

2. 重写路径生成函数，包含语言前缀 #

修改路径生成逻辑，明确传入当前语言，生成包含正确语言前缀的完整URL：

// 重构路径生成函数，传入当前语言参数
const getLocalizedPath = (currentLang, routeKey) => {
  const translatedRoute = translations[currentLang][routeKey];
  return `/${currentLang}/${translatedRoute}`;
};

3. 更新NavLink的to属性 #

使用重构后的函数生成完整路径，替代原来基于旧URL修改的逻辑：

// Home组件中修改NavLink的to属性
<NavLink to={getLocalizedPath(currentLang, 'route1')}>
  {translations[currentLang].route1}
</NavLink>

4. 同步路由配置的动态语言参数 #

确保路由配置中使用动态语言参数，匹配更新后的完整URL结构：

// App组件的路由配置
<Route path="/:lang/:localizedRoute" element={<Route1 />} />

踩坑提醒 #

• 禁止直接在旧URL字符串上替换路径段，必须基于当前语言重新拼接完整URL，否则语言前缀会一直保留旧值
• 语言状态更新后，要确保依赖该状态的组件会重新渲染，否则导航链接不会同步更新
• 切换语言后，可通过hover链接查看完整URL，确认语言前缀和路径段都对应新语言

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