useSelectedLayoutSegments

useSelectedLayoutSegments ist ein Client Component Hook, der es Ihnen ermöglicht, die aktiven Routensegmente unterhalb des Layouts auszulesen, in dem er aufgerufen wird.

Er ist nützlich, um UI-Elemente in übergeordneten Layouts zu erstellen, 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>
  )
}

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 auszulesen.

Rückgabewerte

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

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

Versionsverlauf