reactjs 启用appDir的Next.js 13中的浅路由器推送

omhiaaxx  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(135)

在< 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复制浅层路由器功能?

vxf3dgd4

vxf3dgd41#

尝试使用replace方法代替push

const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();

const toggleStatic = () => {
  if (searchParams.get("static")) {
    router.replace(pathname);
  } else {
    router.replace(pathname + "?static");
  }
};

在nextjs文档中使用路由器。

相关问题