在发生之前检测导航事件 nextjs 13 应用程序路由器

Question

使用 nextjs 12（页面路由器），从“next/router”返回的路由器具有您可以侦听和适当处理的导航事件。 这里是文档。

一个具体事件是

routeChangeStart

。当您希望在用户离开页面之前提示他们时，您已侦听该事件，然后打开模式并抛出错误以阻止导航。

使用 nextjs 13（应用程序路由器），从“next/navigation”返回的路由器不具有订阅事件的相同能力。

文档中有一个解决方案可以告知路线何时已更改。它使用了两个新的钩子

• usePathname

• useSearchParams

这就是解决方案。

我想知道之前路线即将改变。

您如何知道 nextjs 13 应用程序（使用应用程序路由器）何时将要导航，以及如何阻止它这样做？

Answer 1

如果您使用 Link 组件进行导航，则可以使用自定义组件切换它并使用 useRouter 钩子。