useSelectedLayoutSegments

useSelectedLayoutSegments — это хук для Клиентских компонентов (Client Components), который позволяет читать активные сегменты маршрута ниже того Layout, в котором он вызывается.

Полезен для создания UI в родительских Layout, которым необходимо знать о активных дочерних сегментах, например, для хлебных крошек.

'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 является хуком для Клиентских компонентов, а Layout по умолчанию являются Серверными компонентами, useSelectedLayoutSegments обычно вызывается через Клиентский компонент, который импортируется в Layout.
• Возвращаемые сегменты включают Группы маршрутов (Route Groups), которые могут не требоваться в вашем UI. Вы можете использовать метод массива filter() для удаления элементов, начинающихся с квадратной скобки.

Параметры

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments опционально принимает parallelRoutesKey, что позволяет читать активный сегмент маршрута внутри этого слота.

Возвращаемое значение

useSelectedLayoutSegments возвращает массив строк, содержащих активные сегменты на один уровень ниже от Layout, в котором был вызван хук. Или пустой массив, если таких нет.

Например, для приведённых ниже Layout и URL возвращаемые сегменты будут:

История версий