Next.js切换语言时如何避免创建浏览器历史记录

核心问题在于使用router.push会新增浏览器历史条目，改用router.replace即可替换当前历史记录，避免回退时重复切换语言的问题。

修改方案 #

直接将路由跳转方式从push改为replace，同时保留当前页面的路径和参数，确保切换语言后停留在当前页面：

import { useRouter } from 'next/router';
import setLanguage from 'next-translate/setLanguage';

export const LanguageDropdown = () => {
  const { locales, locale, router } = useRouter();

  const updateLanguage = async (language: string) => {
    const targetLang = language.toLowerCase();
    // 存储用户选择的语言
    window.localStorage.setItem('language-selected', targetLang);
    // 更新应用语言配置
    await setLanguage(targetLang);
    // 替换当前历史条目，不新增记录
    router.replace(
      { 
        pathname: router.pathname, 
        query: router.query 
      },
      undefined,
      { locale: targetLang }
    );
  };

  return (
    <select onChange={(e) => updateLanguage(e.target.value)} value={locale}>
      {locales?.map((lang) => (
        <option key={lang} value={lang}>
          {lang.toUpperCase()}
        </option>
      ))}
    </select>
  );
};

关键说明 #

• router.replace的作用：该方法会替换当前的浏览器历史记录条目，而非添加新条目。用户切换语言后，点击回退按钮会直接回到切换前的页面，不会回到之前的语言版本。
• 保留当前页面状态：通过router.pathname和router.query构造路由对象，确保切换语言后停留在当前页面，不会跳转到首页或其他页面。
• 优先使用库内置配置：如果你的setLanguage方法支持传入replace选项（部分国际化库会提供），可以直接通过await setLanguage(targetLang, { replace: true })实现，无需手动调用router.replace，具体参考next-translate的官方文档。

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