useSelectedLayoutSegments

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

هذا مفاص لإنشاء واجهات المستخدم في التخطيطات الأم التي تحتاج إلى معرفة بالمقاطع الفرعية النشطة مثل مسارات التنقل (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 أدناه، ستكون المقاطع المُرجعة:

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