Exemples

onIntent peut lancer tout travail de préparation sûr et répétable. Gardez les actions irréversibles, comme les achats, messages et envois de formulaires, derrière un vrai clic.

Précharger une route

Le cas d’usage courant avec Next.js.

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

Préparer les données

Demandez à votre bibliothèque de données de mettre en cache les informations nécessaires à l’écran suivant.

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

Précharger une image

Commencez à charger une ressource lourde avant la navigation.

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

Préparer un composant

Utilisez useIntentTarget lorsque la cible n’est pas un lien.

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

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