useSelectedLayoutSegment

useSelectedLayoutSegment es un hook para Componentes Cliente que permite leer el segmento de ruta activo un nivel por debajo del Layout desde el que se llama.

Es útil para interfaces de navegación, como pestañas dentro de un layout padre que cambian de estilo según el segmento hijo activo.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>Segmento activo: {segment}</p>
}

Importante:

• Dado que useSelectedLayoutSegment es un hook para Componentes Cliente y los Layouts son Componentes Servidor por defecto, useSelectedLayoutSegment normalmente se llama a través de un Componente Cliente que se importa en un Layout.
• useSelectedLayoutSegment solo devuelve el segmento un nivel por debajo. Para devolver todos los segmentos activos, consulta useSelectedLayoutSegments

Parámetros

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

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

Devuelve

useSelectedLayoutSegment devuelve una cadena con el segmento activo o null si no existe.

Por ejemplo, dados los Layouts y URLs siguientes, el segmento devuelto sería:

Ejemplos

Crear un componente de enlace activo

Puedes usar useSelectedLayoutSegment para crear un componente de enlace activo que cambie de estilo según el segmento activo. Por ejemplo, una lista de posts destacados en la barra lateral de un blog:

'use client'

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// Este componente *cliente* se importará en un layout de blog
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Navegar a `/blog/hello-world` devolverá 'hello-world'
  // para el segmento de layout seleccionado
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Cambiar estilo según si el enlace está activo
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

Historial de versiones