useLinkStatus

useLinkStatus 鉤子可讓您追蹤 <Link> 的 pending 狀態。您可以用它在使用者導航至新路由時，顯示行內視覺回饋（例如旋轉圖示或文字閃爍）。

useLinkStatus 在以下情況特別有用：

• 預取 (Prefetching) 被停用或正在進行中，這表示導航被阻擋。
• 目標路由是動態的 且 沒有包含 loading.js 檔案，該檔案可實現瞬間導航。

'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
}

須知事項:

• useLinkStatus 必須在 Link 元件的子元件中使用
• 當 Link 元件設定 prefetch={false} 時，此鉤子最為有用
• 如果連結的路由已被預取，則會跳過 pending 狀態
• 當快速連續點擊多個連結時，只會顯示最後一個連結的 pending 狀態
• 此鉤子在 Pages Router 中不受支援，且永遠會回傳 { pending: false }

參數

const { pending } = useLinkStatus()

useLinkStatus 不接受任何參數。

回傳值

useLinkStatus 回傳一個包含單一屬性的物件：

範例

行內載入指示器

在使用者點擊連結但預取尚未完成時，提供視覺回饋以顯示導航正在進行中會很有幫助。

'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
}

優雅處理快速導航

如果導航至新路由的速度很快，使用者可能會看到不必要的載入指示器閃爍。一種改善使用者體驗並只在導航耗時較長時顯示載入指示器的方法是加入初始動畫延遲（例如 100 毫秒）並以隱藏狀態（例如 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);
  }
}