useSelectedLayoutSegments

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

Он полезен для создания пользовательского интерфейса в родительских макетах, которым требуется информация об активных дочерних сегментах, таких как хлебные крошки.

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

Параметры

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

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

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

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

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