i18next+React Router切换语言时URL无法正确变更问题

你的核心问题在于：切换语言时仅更新了i18n的语言状态和组件内的language状态，但没有修改浏览器URL，导致react-router无法匹配新的路由路径，因此组件无法加载。手动修改URL能正常工作是因为此时路由路径与URL一致。

以下是具体修复步骤：

1. 重构路由定义为动态参数 #

将App.tsx中硬编码的语言路径改为动态路由参数:lng，这样路由可以匹配任何支持的语言，而不需要依赖组件状态：

// App.tsx 修改后的Routes部分
<Routes>
  <Route path="/:lng" element={<Login/>}></Route>
  <Route path="/:lng/forgot-password" element={<ForgotPassword/>}></Route>
  <Route element={<PrivateRoutes/>}>
    <Route path="/:lng/dashboard" element={<Dashboard/>}></Route>
    <Route path="/:lng/change-password" element={<ChangePassword/>}></Route>
  </Route> 
  <Route path="reset-password" element={<ResetPassword/>}></Route>
</Routes>

2. 语言切换时更新URL #

在App.tsx中使用useNavigate和useLocation，当语言切换时修改浏览器URL，确保路由与URL同步：

// App.tsx 完整修改代码
import './App.scss';
import { useState, useEffect } from 'react';
import { Routes, Route, useNavigate, useLocation, useParams } from 'react-router-dom';
import { AuthProvider } from './auth';
import ChangePassword from './components/ChangePassword/ChangePassword';
import ForgotPassword from './components/ForgotPassword/ForgotPassword';
import Login from './components/Login/Login';
import ResetPassword from './components/ResetPassword/ResetPassword';
import Dashboard from './components/Dashboard/Dashboard';
import PrivateRoutes from './components/PrivateRoutes';
import LanguageSwitch from './components/LanguageSwitch/LanguageSwitch';
import i18n from './i18n';

const App = () => {
  const [language, setLanguage] = useState(i18n.language);
  const navigate = useNavigate();
  const location = useLocation();
  const { lng } = useParams<{ lng: string }>();

  // 当URL中的语言参数变化时，同步更新i18n和组件状态
  useEffect(() => {
    if (lng && i18n.options.supportedLngs?.includes(lng) && lng !== language) {
      i18n.changeLanguage(lng);
      setLanguage(lng);
    }
  }, [lng]);

  const handleLanguageChange = (lang: string) => {
    setLanguage(lang);
    // 构造新的URL路径
    const currentPathSegments = location.pathname.split('/').filter(seg => seg !== '');
    
    // 替换路径中的语言段，或在开头添加
    let newSegments: string[];
    if (currentPathSegments.length > 0 && i18n.options.supportedLngs?.includes(currentPathSegments[0])) {
      newSegments = [lang, ...currentPathSegments.slice(1)];
    } else {
      newSegments = [lang, ...currentPathSegments];
    }

    const newPath = '/' + newSegments.join('/');
    navigate(newPath);
  };

  return (
    <AuthProvider>
      <div className="App"> 
        <div className="container">
          <LanguageSwitch passLanguageChange={handleLanguageChange}></LanguageSwitch>
          <div className="row">
            {language}
            <Routes>
              <Route path="/:lng" element={<Login/>}></Route>
              <Route path="/:lng/forgot-password" element={<ForgotPassword/>}></Route>
              <Route element={<PrivateRoutes/>}>
                <Route path="/:lng/dashboard" element={<Dashboard/>}></Route>
                <Route path="/:lng/change-password" element={<ChangePassword/>}></Route>
              </Route> 
              <Route path="reset-password" element={<ResetPassword/>}></Route>
            </Routes>
          </div>
        </div>
      </div>
    </AuthProvider>
  );
};

export default App;

3. 同步语言选择器与当前语言 #

修改LanguageSwitch.tsx，移除无用的lang状态，将选择器的value绑定到i18n.language，确保选择器显示当前激活的语言：

// LanguageSwitch.tsx 修改后代码
import './LanguageSwitch.scss';
import { useTranslation } from "react-i18next";

type LanguateSwitchProps = {
    passLanguageChange: (str: string) => void
};

const LanguageSwitch = (props: LanguateSwitchProps) => {
    const { i18n } = useTranslation(['home']);

    const onClickLanguageChange = (e: any) => {
        const language = e.target.value;
        i18n.changeLanguage(language);
        props.passLanguageChange(language);
    };

    return (
        <div className="language-switch">
            <select className="custom-select" onChange={onClickLanguageChange} value={i18n.language}>
                <option value="en">English</option>
                <option value="es">Español</option>
            </select>
        </div> 
    );
};

export default LanguageSwitch;

4. 保留i18n的路径检测配置 #

你的i18n.tsx中已经配置了detection.order包含path，这部分无需修改，确保i18n能从URL路径中自动检测语言。

修复原理 #

1. 动态路由参数:lng让react-router可以匹配任意语言前缀的路径
2. 语言切换时通过navigate修改URL，确保路由与浏览器地址同步
3. 监听URL中的语言参数变化，同步更新i18n和组件状态
4. 语言选择器与i18n状态绑定，显示当前激活语言

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