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

Question

我正在通过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 },
    });
};

Answer 1

如果您想直接使用 router.push 和给定的目标路径（包括查询值），

并防止滚动到顶部，您还可以使用：

router.push(`/?page=2`, undefined, { scroll: false });

这只是示例，并根据您的情况/要求进行更改。

我希望有帮助

Answer 2

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.pushnext/link在选项对象中接受大部分（如果不是全部）的道具。你可以在这里查看它们：https : //nextjs.org/docs/api-reference/next/link