React JS页面跳转后始终保留URL中lang参数的实现问题

你的问题出在当前代码仅在页面刷新时处理了URL的lang参数，但路由跳转（无论是声明式的Link还是编程式导航）并没有自动带上这个参数。下面是具体的解决方法：

1. 自定义自动携带lang参数的Link组件 #

创建一个全局复用的Link组件，每次跳转时自动拼接当前的lang参数，避免手动重复添加：

// components/LangLink.js
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

const LangLink = ({ to, ...props }) => {
  const { i18n } = useTranslation();
  const location = useLocation();
  
  // 保留当前URL的其他参数，替换/添加lang参数
  const params = new URLSearchParams(location.search);
  params.set('lang', i18n.language);
  
  // 拼接目标路径与参数
  const targetPath = `${to}?${params.toString()}`;
  
  return <Link to={targetPath} {...props} />;
};

export default LangLink;

之后在导航栏或其他需要跳转的地方，用LangLink替代原生的Link：

// NavBar.js示例
import LangLink from '../components/LangLink';

function NavBar() {
  return (
    <nav>
      <LangLink to="/home">首页</LangLink>
      <LangLink to="/signup">注册</LangLink>
    </nav>
  );
}

2. 处理编程式导航（useNavigate） #

如果使用useNavigate做编程式跳转，需要手动带上lang参数，也可以复用上面的参数逻辑：

import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

function SomeComponent() {
  const navigate = useNavigate();
  const { i18n } = useTranslation();
  
  const handleJumpToSignup = () => {
    const params = new URLSearchParams();
    params.set('lang', i18n.language);
    navigate(`/signup?${params.toString()}`);
  };
  
  return <button onClick={handleJumpToSignup}>前往注册</button>;
}

3. 优化App组件的代码 #

• 给useEffect添加正确的依赖，避免无意义的重复执行
• 修复组件大小写错误（原代码中<signup />应为<SignUp />）

优化后的App组件：

import React, { useEffect } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import NavBar from './layout/navbar';
import Home from './pages/home';
import { useTranslation } from 'react-i18next';
import SignUp from './pages/auth/signup';

function App() {
  const { i18n } = useTranslation();

  useEffect(() => {
    const queryParam = new URLSearchParams(window.location.search);
    const lang = queryParam.get('lang');
    
    if (!lang) {
      queryParam.set('lang', i18n.language);
      window.history.replaceState({}, '', `?${queryParam}`);
    }
  }, [i18n.language]); // 仅当语言变化时执行

  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="home" element={<Home />} />
        <Route path="signup" element={<SignUp />} /> {/* 修复组件大小写 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

额外建议 #

可以把参数处理逻辑抽成工具函数，方便在Link和编程式导航中复用：

// utils/urlUtils.js
export const addLangParamToPath = (path, lang) => {
  const params = new URLSearchParams();
  params.set('lang', lang);
  return `${path}?${params.toString()}`;
};

这样在LangLink或useNavigate中直接调用该函数即可，减少重复代码。

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