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

Question

我通过从next/router导入useRouter来使用next路由器。

我试图找到一个解决方案，将不会滚动到页面的顶部，当我改变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有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在options对象中接受next/link的大部分(如果不是全部)道具。你可以在这里查看:https://nextjs.org/docs/api-reference/next/link

Answer 2

如果你喜欢使用路由器。直接推送给定的目标路径，包括查询值

和防止滚动到顶部，您可以使用also:

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

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

我希望有帮助

Answer 3

我的一个奇怪的变通方法。只需要获取视图中的特定组件。这是如何。

import React, { useEffect, useRef } from 'react';

function MyAccount() {
const containerRef = useRef(null);
useEffect(() => {
setTimeout(() => {
containerRef.current.scrollIntoView({ behavior: 'smooth' });
}, 250);
}, []);
return (
<div ref={containerRef}>
{/* It will be your particular component that needs to be shown  */}
<UserInformation /> 
</div>
);
}
export default MyAccount;

有些人可能会发现它很有用!这就是为什么我把这个贴在这里。如果你想保留视图，Scroll =false是最好的解决方案。