Next.js — router.push 将页面滚动到顶部，尽管滚动选项设置为 false

Question

我正在使用 Next.js 的内置国际化功能来更改我的应用程序的语言，除了一种不良行为外，一切都运行良好：

尽管将路由器的滚动选项设置为 false ，但调用changeLanguage function 会导致页面滚动到顶部。

请注意Next.js - router.push 没有滚动到顶部和Next.js 在页面路由没有解决我的问题时保持滚动 position 。

import { useRouter } from "next/router";
import Select, { components } from "react-select";

const LanguageToggler = () => {

  const router = useRouter();
  const { locale, pathname, locales, asPath } = router;

  const changeLanguage = (e) => {
    const locale = e.value; // is equal to one of these values: ['en', 'sv', 'ru', 'fr']
    router.push(pathname, asPath, { locale }, { scroll: false });
  };

 return (
      <Select
        ...irrelevant
        onChange={changeLanguage}
        components={{
          Option: CustomSelectOption,
        }}
      />
    )
};

export default LanguageToggler;

PS react-select 库用于显示标志的下拉列表，单击每个标志changeLanguage以相应地更新语言环境。

Answer 1

接下来router.push接受三个参数。

router.push(pathname, asPath, { locale }, { scroll: false });

应该

router.push(pathname, asPath, { locale, scroll: false });