示例

使用 onIntent 启动安全、可重复的准备工作。购买、发送消息或提交表单等不可逆操作应等到真正点击后再执行。

预取路由

最常见的 Next.js 用例。

<IntentLink href={href} onIntent={() => router.prefetch(href)}>
  {label}
</IntentLink>

准备数据

将下一个界面需要的信息放入数据层缓存。

<IntentLink
  href={`/product/${id}`}
  onIntent={() => queryClient.prefetchQuery({ queryKey: ["product", id] })}
>
  {name}
</IntentLink>

预加载图片

在导航前开始加载大型资源。

<IntentLink
  href={`/product/${id}`}
  onIntent={() => {
    const image = new Image()
    image.src = heroImageFor(id)
  }}
>
  {name}
</IntentLink>

准备组件

目标不是链接时，请使用 useIntentTarget。

const intentRef = useIntentTarget<HTMLButtonElement>({
  onIntent: () => { void import("./product-preview") },
})

return <button ref={intentRef}>Open preview</button>