时间戳

首页 > 解决方案 > Next.js — router.push 将页面滚动到顶部，尽管滚动选项设置为 false

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

问题描述

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

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

请注意，当页面路由没有解决我的问题时， Next.js - router.push 不滚动到顶部并且Next.js 保持滚动位置。

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以相应地更新语言环境。

标签： javascriptreactjsnext.jsinternationalizationreact-select

解决方案

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

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

应该

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

推荐阅读