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);
  }
}