[英]Next.js - router.push without scrolling to the top
我通过从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 },
});
};
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
在选项 object 中接受大部分(如果不是全部) next/link
的道具。 你可以在这里查看它们: https://nextjs.org/docs/api-reference/next/link
如果你想直接使用 router.push 给定的目标路径,包括查询值,
并防止滚动到顶部,您还可以使用:
router.push(`/?page=2`, undefined, { scroll: false });
这只是示例,并根据您的情况/要求进行更改。
我希望有帮助
我的一个奇怪的解决方法。 只需在视图中获取特定组件。 就是这样。
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 是最好的解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.