useSelectedLayoutSegments

useSelectedLayoutSegments es un hook de Componente Cliente que permite leer los segmentos de ruta activos debajo del Layout desde donde se llama.

Es útil para crear interfaces en Layouts padres que necesitan conocer los segmentos hijos activos, como 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>
  )
}

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

Dato importante:

• Dado que useSelectedLayoutSegments es un hook de Componente 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 desee incluir en su interfaz. Puede usar el método filter() de arrays para eliminar elementos que comiencen con corchete.

Parámetros

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

Retorno

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 Layouts y URLs a continuación, los segmentos devueltos serían:

Historial de versiones