useLinkStatus

useLinkStatus 是一个 客户端组件 Hook，可让您在导航期间跟踪 Link 组件的加载状态。它可用于在页面过渡期间显示加载指示器，尤其是在预取被禁用或链接的路由没有任何加载状态时。

app/loading-indicator.tsx

'use client'
 
import { useLinkStatus } from 'next/link'
 
export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? <span>⌛</span> : null
}

app/header.tsx

import Link from 'next/link'
import LoadingIndicator from './loading-indicator'
 
export default function Header() {
  return (
    <header>
      <Link href="/dashboard" prefetch={false}>
        Dashboard <LoadingIndicator />
      </Link>
    </header>
  )
}

须知:

useLinkStatus 必须在 Link 组件的后代组件中使用

当在 Link 组件上设置 prefetch={false} 时，此 Hook 最有用

如果链接的路由已被预取，则将跳过 pending 状态

当快速连续单击多个链接时，仅显示最后一个链接的 pending 状态

Pages Router 中不支持此 Hook，并且始终返回 { pending: false }

参数

const { pending } = useLinkStatus()

useLinkStatus 不接受任何参数。

返回值

useLinkStatus 返回一个具有单个属性的对象

属性	类型	描述
pending	boolean	在历史记录更新之前为 `true`，之后为 `false`

示例

在使用新查询参数导航时改善用户体验

在此示例中，在类别之间导航会更新查询字符串（例如 ?category=books）。但是，页面可能显得无响应，因为 <PageSkeleton /> 回退不会替换现有内容（请参阅防止不必要的加载指示器）。

您可以使用 useLinkStatus Hook 在活动链接旁边渲染一个轻量级加载指示器，并在数据正在获取时向用户提供即时反馈。

app/components/loading-indicator.tsx

'use client'
 
import { useLinkStatus } from 'next/link'
 
export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? <span>⌛</span> : null
}

app/page.tsx

import { useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { Suspense } from 'react'
import LoadingIndicator from './loading-indicator'
 
function MenuBar() {
  return (
    <div>
      <Link href="?category=electronics">
        Electronics <LoadingIndicator />
      </Link>
      <Link href="?category=clothing">
        Clothing <LoadingIndicator />
      </Link>
      <Link href="?category=books">
        Books <LoadingIndicator />
      </Link>
    </div>
  )
}
 
async function ProductList({ category }: { category: string }) {
  const products = await fetchProducts(category)
 
  return (
    <ul>
      {products.map((product) => (
        <li key={product}>{product}</li>
      ))}
    </ul>
  )
}
 
export default async function ProductCategories({
  searchParams,
}: {
  searchParams: Promise<{
    category: string
  }>
}) {
  const { category } = await searchParams
 
  return (
    <Suspense fallback={<PageSkeleton />}>
      <MenuBar />
      <ProductList category={category} />
    </Suspense>
  )
}

版本	变更
`v15.3.0`	引入 `useLinkStatus`。