javascript - Next.js - router.push 不滚动到顶部

标签 javascript reactjs routes next.js next-router

我通过导入 useRouter 使用下一个路由器来自 next/router .
我试图找到一个解决方案,当我更改 URL 的查询时,它不会滚动到页面顶部。有什么解决办法吗?我知道 Next 中的 Link 组件具有该选项,但我需要使用 Router 组件。我的下一个版本是 10.0.5。

const router = useRouter();

const changeCurrency = (newCurrency) => {
   //Do some stuff here

    Router.push({
        pathname: router.pathname,
        query: { ...router.query, currency: newCurrency.value },
    });
};

最佳答案

router.push有一个 scroll选项,它是 true默认。你可以像这样关闭它:

const router = useRouter();

async function navigate(newCurrency) {
  router.push({
    pathname: router.pathname,
    query: { ...router.query, currency: newCurrency.value },
  }, undefined, { scroll: false });
}
router.push接受大部分(如果不是全部)next/link选项对象中的 Prop 。你可以在这里查看它们:https://nextjs.org/docs/api-reference/next/link

关于javascript - Next.js - router.push 不滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65902664/

相关文章:

javascript - Bootstrap : set height of a div relative to the height of another div?

javascript - D3 图中的垂直线在缩放/平移时移动

javascript - Highcharts 仪表间距

android - 用expo生成的apk安装时不要求权限

javascript - React.js : Why child component change parent state?

ruby-on-rails - 有关 Ruby on Rails 的常见问题

f# - 如何使用 Suave 捕获像 "/COMPANY/rest..."这样的动态子路径并嵌套路由?

javascript - : up, 键盘点击事件 下、左、右

reactjs - onClick 在手机上用什么?

asp.net-mvc-4 - 在 Html.BeginForm 内传递路由值,但在操作方法中获取零