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

Question

I am using Next.js' built-in internationalisation features to change my app's language and everything is working perfectly except for one undesirable behaviour:

Calling the changeLanguage function results in the page scrolling to the top in spite of setting the router's scroll option to false .

Please note that Next.js - router.push without scrolling to the top and Next.js maintain scroll position when page Routing did not solve my issue.

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 The react-select library is used to display a dropdown list of flags, clicking each flag summons changeLanguage to update the locale accordingly.

Answer 1

Next router.push accepts three parameters.

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

should be

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