useSelectedLayoutSegments

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

المعاملات

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

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

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

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

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