useSelectedLayoutSegments

useSelectedLayoutSegments ist ein Client Component-Hook, der es Ihnen ermöglicht, die aktiven Routensegmente unterhalb des Layouts zu lesen, von dem aus er aufgerufen wird.

Er ist nützlich für die Erstellung von UI-Elementen in übergeordneten Layouts, die Informationen über aktive untergeordnete Segmente benötigen, wie z.B. 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>
  )
}

Wissenswert:

• Da useSelectedLayoutSegments ein Client Component-Hook ist und Layouts standardmäßig Server Components sind, wird useSelectedLayoutSegments normalerweise über eine Client Component aufgerufen, die in ein Layout importiert wird.
• Die zurückgegebenen Segmente enthalten Route Groups, die Sie möglicherweise nicht in Ihrer UI anzeigen möchten. Sie können die filter()-Array-Methode verwenden, um Elemente zu entfernen, die mit einer Klammer beginnen.

Parameter

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments akzeptiert optional einen parallelRoutesKey, der es Ihnen ermöglicht, das aktive Routensegment innerhalb dieses Slots zu lesen.

Rückgabewerte

useSelectedLayoutSegments gibt ein Array von Strings zurück, das die aktiven Segmente eine Ebene unterhalb des Layouts enthält, von dem aus der Hook aufgerufen wurde. Oder ein leeres Array, falls keine existieren.

Beispielsweise würden bei den folgenden Layouts und URLs folgende Segmente zurückgegeben werden:

Versionsverlauf