useSelectedLayoutSegments

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

Параметры

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

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

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

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

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