在 Next.js 中更改语言时防止创建历史条目

Question

我正在开发一个 Next.js 项目，其中有一个语言下拉列表供用户选择他们的首选语言。当前的实现使用 next/router 中的 router.push 方法来更新语言并重定向到当前页面而无需重新加载。但是，这会在浏览器历史记录中创建一个新条目。

相关代码如下：

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


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

  const updateLanguage = async (language: string) => {
    window.localStorage.setItem('language-selected', language.toLowerCase());
    // Assuming setLanguage is a function that updates the language in your app
    await setLanguage(language.toLowerCase());
  };

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

问题在于，当用户更改语言时，历史记录中会创建一个新条目。如果用户随后导航回来，他们会到达之前设置的语言，然后重定向到新语言。我想防止这种行为，并且在语言更改时不创建新的历史记录条目。

任何有关如何实现这一目标的建议将不胜感激。

Answer 1

代替 router.push。 window.location.reload() 怎么样？

async function setLanguage(language) {
  // Some code to set language
  window.location.reload()
}

页面重新加载后，会检查localStorage，看看选择了哪种语言。