如何在React中自动为路由添加语言前缀

1. 修正路由配置的错误 #

React Router v6 中Routes组件不存在baseName属性，需将basename配置在BrowserRouter组件上（一般在项目入口文件main.jsx中）：

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { AppProvider } from './context/AppContext'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AppProvider>
      <BrowserRouter basename="/"> {/* basename 默认值为"/"，可省略 */}
        <App />
      </BrowserRouter>
    </AppProvider>
  </React.StrictMode>,
)

2. 更新路由组件，添加根路径重定向 #

修改AppRoutes.jsx，添加根路径自动重定向逻辑，确保所有业务路由嵌套在:lang参数路由下：

import { Routes, Route, Navigate, useContext } from "react-router-dom";
import Auth from "../pages/Auth.jsx";
import { AppContext } from "../context/AppContext.jsx";

const AppRoutes = () => {
  const { lang } = useContext(AppContext);

  return (
    <Routes>
      {/* 访问根路径时，自动重定向到当前语言对应的路由 */}
      <Route path="/" element={<Navigate to={`/${lang}/`} replace />} />
      {/* 带语言标识的父路由 */}
      <Route path=":lang">
        {/* 语言根路径默认跳转到认证页，可根据需求修改为首页 */}
        <Route index element={<Navigate to="authentification" replace />} />
        {/* 业务路由 */}
        <Route path="authentification" element={<Auth />} />
        {/* 其他业务路由均添加在此父路由下 */}
      </Route>
      {/* 处理不存在的路由，重定向到当前语言的默认页面 */}
      <Route path="*" element={<Navigate to={`/${lang}/authentification`} replace />} />
    </Routes>
  );
};

export default AppRoutes;

3. 确保语言上下文有有效初始值 #

在AppContext.jsx中设置语言初始值，优先从本地存储读取，保证重定向路径有效：

import { createContext, useState } from "react";

export const AppContext = createContext();

export const AppProvider = ({ children }) => {
  // 初始语言优先取本地存储，默认用英文
  const [lang, setLang] = useState(localStorage.getItem("lang") || "en");

  // 切换语言时同步保存到本地存储
  const changeLang = (newLang) => {
    setLang(newLang);
    localStorage.setItem("lang", newLang);
  };

  return (
    <AppContext.Provider value={{ lang, setLang: changeLang }}>
      {children}
    </AppContext.Provider>
  );
};

4. 优化语言切换后的路由跳转 #

修改Footer.jsx，切换语言时自动跳转到对应语言的当前页面，避免停留在旧语言路径：

import { useContext, useLocation } from "react";
import { AppContext } from "../../context/AppContext";
import { useNavigate } from "react-router-dom";

const Footer = () => {
  const { lang, setLang } = useContext(AppContext);
  const navigate = useNavigate();
  const location = useLocation();

  const handleLangChange = (newLang) => {
    setLang(newLang);
    // 提取当前路径中除语言标识外的部分
    const pathWithoutLang = location.pathname.replace(/^\/[a-z]{2}/, "");
    // 跳转到新语言的对应路径
    navigate(`/${newLang}${pathWithoutLang}`);
  };

  return (
    <footer>
      <button onClick={() => handleLangChange("en")} disabled={lang === "en"}>
        英文
      </button>
      <button onClick={() => handleLangChange("fr")} disabled={lang === "fr"}>
        法语
      </button>
    </footer>
  );
};

export default Footer;

内容的提问来源于stack exchange，提问作者ANASS OULED BEN TAHAR