在< Next 13(或禁用appDir)中,您可以执行以下操作:
const MyComponent = () => {
const router = useRouter();
const toggleStatic = () => {
if (router.query.static) {
router.push(router.pathname, router.pathname, { shallow: true });
} else {
router.push(router.pathname, router.pathname + "?static", { shallow: true });
}
}
return <>
// ...
</>
});
这将执行浅层路由器更新,该更新将更改位置,但不会将其推送到历史记录或触发页面加载。
现在,启用了appDir,您需要从next/navigation
导入函数。但是文档没有说任何关于使用新路由器的浅路由器推送的事情?
我能做的就是:
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const toggleStatic = () => {
if (searchParams.get("static")) {
router.push(pathname);
} else {
router.push(pathname + "?static");
}
};
但这会重新加载整个页面。有没有一种方法可以使用Next 13的appDir复制浅层路由器功能?
1条答案
按热度按时间vxf3dgd41#
尝试使用
replace
方法代替push
:在nextjs文档中使用路由器。