useSelectedLayoutSegments

useSelectedLayoutSegments هو خطاف مكون العميل (Client Component) يتيح لك قراءة مقاطع المسار النشط أسفل التخطيط الذي يتم استدعاؤه منه.

هو مفيد لإنشاء واجهة المستخدم في التخطيطات الأم التي تحتاج إلى معرفة بالمقاطع الفرعية النشطة مثل مسار التصفح (breadcrumbs).

'use client'

import { useSelectedLayoutSegments } from 'next/navigation'

export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()

  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}

'use client'

import { useSelectedLayoutSegments } from 'next/navigation'

export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()

  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}

معلومة مفيدة:

• نظرًا لأن useSelectedLayoutSegments هو خطاف مكون العميل (Client Component)، والتخطيطات هي مكونات الخادم (Server Components) افتراضيًا، فإن useSelectedLayoutSegments عادةً ما يتم استدعاؤه عبر مكون عميل يتم استيراده إلى التخطيط.
• المقاطع المُرجعة تتضمن مجموعات المسار (Route Groups)، والتي قد لا ترغب في تضمينها في واجهة المستخدم. يمكنك استخدام طريقة المصفوفة filter() لإزالة العناصر التي تبدأ بقوس.

المعاملات

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

يقبل useSelectedLayoutSegments اختياريًا parallelRoutesKey، مما يسمح لك بقراءة مقطع المسار النشط داخل تلك الفتحة.

القيم المُرجعة

يُرجع useSelectedLayoutSegments مصفوفة من السلاسل تحتوي على المقاطع النشطة بمستوى واحد أسفل التخطيط الذي تم استدعاء الخطاف منه. أو مصفوفة فارغة إذا لم تكن هناك مقاطع.

على سبيل المثال، بالنظر إلى التخطيطات وعناوين URL أدناه، ستكون المقاطع المُرجعة:

سجل الإصدارات