如何解决Next.js - router.push 不滚动到顶部
我通过从 useRouter
导入 next/router
来使用 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 },});
};
解决方法
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
的道具。您可以在此处查看它们:https://nextjs.org/docs/api-reference/next/link
我的一个奇怪的解决方法。只需获取视图中的特定组件。方法如下。
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 是最好的解决方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。