useSelectedLayoutSegment

useSelectedLayoutSegment es un hook de Componente Cliente que permite leer el segmento de ruta activo un nivel por debajo del Layout desde donde 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>
}

'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 de Componente 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 slot.

Retorno

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

Por ejemplo, dados los Layouts y URLs a continuación, el segmento devuelto sería:

Layout	URL visitada	Segmento devuelto
`app/layout.js`	`/`	`null`
`app/layout.js`	`/dashboard`	`'dashboard'`
`app/dashboard/layout.js`	`/dashboard`	`null`
`app/dashboard/layout.js`	`/dashboard/settings`	`'settings'`
`app/dashboard/layout.js`	`/dashboard/analytics`	`'analytics'`
`app/dashboard/layout.js`	`/dashboard/analytics/monthly`	`'analytics'`

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

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

// Importar el Componente Cliente en un Layout padre (Componente Servidor)
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

// Importar el Componente Cliente en un Layout padre (Componente Servidor)
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({ children }) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

Historial de versiones

Versión	Cambios
`v13.0.0`	Se introdujo `useSelectedLayoutSegment`.

Parámetros

Retorno

Ejemplos

Crear un componente de enlace activo

Historial de versiones

On this page