useLinkStatus

يتيح لك خطاف useLinkStatus تتبع الحالة المعلقة لمكون <Link>. يمكنك استخدامه لعرض ملاحظات بصرية مضمنة للمستخدم (مثل دوارات التحميل أو توهج النص) أثناء اكتمال الانتقال إلى مسار جديد.

يكون useLinkStatus مفيدًا عندما:

يكون الجلب المسبق معطلاً أو قيد التقدم مما يعني أن الانتقال محظور.
يكون مسار الوجهة ديناميكيًا ولا يتضمن ملف 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
}

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

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

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

يكون الخطاف أكثر فائدة عند تعيين prefetch={false} على مكون Link

إذا تم جلب المسار المرتبط مسبقًا، سيتم تخطي الحالة المعلقة

عند النقر على عدة روابط بسرعة متتالية، يتم عرض الحالة المعلقة للرابط الأخير فقط

لا يتم دعم هذا الخطاف في موجه الصفحات وسيعود دائمًا بقيمة { pending: false }

القيم المعادة

يُرجع useLinkStatus كائنًا يحتوي على خاصية واحدة:

الخاصية	النوع	الوصف
pending	boolean	`true` قبل تحديث السجل، `false` بعده

مثال

مؤشر تحميل مضمن

من المفيد إضافة ملاحظات بصرية تشير إلى حدوث الانتقال في حال نقر المستخدم على رابط قبل اكتمال الجلب المسبق.

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

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

import Link from 'next/link'
import LoadingIndicator from './components/loading-indicator'

const links = [
  { href: '/shop/electronics', label: 'Electronics' },
  { href: '/shop/clothing', label: 'Clothing' },
  { href: '/shop/books', label: 'Books' },
]

function Menubar() {
  return (
    <div>
      {links.map((link) => (
        <Link key={link.label} href={link.href}>
          {link.label} <LoadingIndicator />
        </Link>
      ))}
    </div>
  )
}

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Menubar />
      {children}
    </div>
  )
}

import Link from 'next/link'
import LoadingIndicator from './components/loading-indicator'

const links = [
  { href: '/shop/electronics', label: 'Electronics' },
  { href: '/shop/clothing', label: 'Clothing' },
  { href: '/shop/books', label: 'Books' },
]

function Menubar() {
  return (
    <div>
      {links.map((link) => (
        <Link key={link.label} href={link.href}>
          {link.label} <LoadingIndicator />
        </Link>
      ))}
    </div>
  )
}

export default function Layout({ children }) {
  return (
    <div>
      <Menubar />
      {children}
    </div>
  )
}

التعامل السلس مع الانتقال السريع

إذا كان الانتقال إلى مسار جديد سريعًا، فقد يرى المستخدم وميضًا غير ضروري لمؤشر التحميل. إحدى طرق تحسين تجربة المستخدم وعرض مؤشر التحميل فقط عندما يستغرق الانتقال وقتًا أطول لإكماله هي إضافة تأخير أولي للرسوم المتحركة (مثل 100 مللي ثانية) وبدء الرسوم المتحركة كخفي (مثل opacity: 0).

app/styles/global.css

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

الإصدار	التغييرات
`v15.3.0`	تم تقديم `useLinkStatus`.

رابط (Link)

تمكين التنقل السريع من جانب العميل باستخدام مكون `next/link` المدمج.

ملف loading.js

مرجع API لملف loading.js.

المعاملات