在发生之前检测导航事件 nextjs 13 应用程序路由器，然后防止其发生

Question

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

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

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

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

• usePathname
• useSearchParams

这是该解决方案。

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

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

Answer 1

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