useSelectedLayoutSegment

useSelectedLayoutSegment est un hook Client Component qui vous permet de lire le segment de route actif un niveau en dessous du Layout depuis lequel il est appelé.

Il est utile pour les interfaces de navigation, comme des onglets dans un layout parent qui changent de style en fonction du segment enfant actif.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

  return <p>Segment actif : {segment}</p>
}

Bon à savoir :

• Comme useSelectedLayoutSegment est un hook de Client Component et que les Layouts sont par défaut des Server Components, useSelectedLayoutSegment est généralement appelé via un Client Component importé dans un Layout.
• useSelectedLayoutSegment ne retourne que le segment un niveau en dessous. Pour obtenir tous les segments actifs, consultez useSelectedLayoutSegments

Paramètres

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment accepte optionnellement une clé parallelRoutesKey, qui permet de lire le segment de route actif dans cet emplacement.

Valeur retournée

useSelectedLayoutSegment retourne une chaîne représentant le segment actif ou null s'il n'en existe pas.

Par exemple, avec les Layouts et URLs ci-dessous, le segment retourné serait :

Exemples

Création d'un composant de lien actif

Vous pouvez utiliser useSelectedLayoutSegment pour créer un composant de lien actif qui change de style en fonction du segment actif. Par exemple, une liste d'articles en vedette dans la barre latérale d'un blog :

'use client'

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

// Ce *client* component sera importé dans un layout de blog
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Naviguer vers `/blog/hello-world` retournera 'hello-world'
  // pour le segment de layout sélectionné
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Change le style selon si le lien est actif
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

Historique des versions