Next.js

Question

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

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

请注意 and Next.js maintain scroll position when page Routing没有解决我的问题。

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;

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

Answer 1

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

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

应该是

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

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

Next.js — router.push scrolls page to the top despite scroll option set to false

javascript

internationalization

reactjs

react-select