useLinkStatus

Der useLinkStatus-Hook ermöglicht es Ihnen, den pending-Status eines <Link>-Elements zu verfolgen. Sie können ihn verwenden, um dem Benutzer während der Navigation zu einer neuen Route visuelles Feedback anzuzeigen (wie Ladeanimationen oder Textglitzern).

useLinkStatus ist nützlich, wenn:

• Prefetching deaktiviert ist oder im Gange ist, was bedeutet, dass die Navigation blockiert ist.
• Die Zielroute dynamisch ist und keine loading.js-Datei enthält, die eine sofortige Navigation ermöglichen würde.

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

Wissenswert:

• useLinkStatus muss innerhalb einer untergeordneten Komponente eines Link-Elements verwendet werden
• Der Hook ist besonders nützlich, wenn prefetch={false} für das Link-Element gesetzt ist
• Wenn die verlinkte Route bereits geprefetched wurde, wird der pending-Status übersprungen
• Wenn mehrere Links schnell hintereinander geklickt werden, wird nur der pending-Status des letzten Links angezeigt
• Dieser Hook wird im Pages Router nicht unterstützt und gibt immer { pending: false } zurück

Parameter

const { pending } = useLinkStatus()

useLinkStatus nimmt keine Parameter entgegen.

Rückgabewerte

useLinkStatus gibt ein Objekt mit einer einzelnen Eigenschaft zurück:

Beispiel

Inline-Ladeindikator

Es ist hilfreich, visuelles Feedback anzuzeigen, wenn die Navigation stattfindet, falls der Benutzer einen Link anklickt, bevor das Prefetching abgeschlossen ist.

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

Umgang mit schneller Navigation

Wenn die Navigation zu einer neuen Route schnell ist, könnten Benutzer ein unnötiges Aufblitzen des Ladeindikators sehen. Eine Möglichkeit, die Benutzererfahrung zu verbessern und den Ladeindikator nur anzuzeigen, wenn die Navigation länger dauert, besteht darin, eine anfängliche Animationsverzögerung (z.B. 100ms) hinzuzufügen und die Animation unsichtbar zu starten (z.B. opacity: 0).

.spinner {
  /* ... */
  opacity: 0;
  animation:
    fadeIn 500ms 100ms forwards,
    rotate 1s linear infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}