useSelectedLayoutSegments

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

Es útil para crear UI 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>
  )
}

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 quieras incluir en tu UI. Puedes usar el método filter() de arrays para eliminar elementos que comiencen con un corchete.

Parámetros

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments acepta opcionalmente una parallelRoutesKey, que te 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