useSelectedLayoutSegments

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

Параметры

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

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

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

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

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