useSelectedLayoutSegments

useSelectedLayoutSegments es un hook para Componentes Cliente que permite leer los segmentos de ruta activos inferiores al Layout desde donde se llama.

Es útil para crear interfaces en Layouts padres que necesitan conocer los segmentos hijos activos, como por ejemplo migas de pan.

'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>
  )
}

Importante:

• Dado que useSelectedLayoutSegments es un hook para Componentes Cliente y los Layouts son Componentes Servidor por defecto, useSelectedLayoutSegments normalmente se llama a través de un Componente Cliente que se importa en un Layout.
• Los segmentos devueltos incluyen Grupos de Ruta, que quizás no desees incluir en tu interfaz. Puedes usar el método filter para eliminar elementos que comiencen con corchetes.

Parámetros

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments acepta opcionalmente una parallelRoutesKey, que permite leer el segmento de ruta activo dentro de ese slot.

Retorna

useSelectedLayoutSegments devuelve un array de strings que contiene los segmentos activos un nivel por debajo del Layout desde donde se llamó al hook. O un array vacío si no existen.

Por ejemplo, dados los siguientes Layouts y URLs, los segmentos devueltos serían:

Historial de versiones