useSelectedLayoutSegment

useSelectedLayoutSegment est un hook de Composant Client qui vous permet de lire le segment de route actif un niveau en dessous de la mise en page (Layout) depuis laquelle il est appelé.

Il est utile pour les interfaces de navigation, comme des onglets dans une mise en page parente 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>
}

'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 Composant Client et que les mises en page (Layouts) sont par défaut des Composants Serveur, useSelectedLayoutSegment est généralement appelé via un Composant Client importé dans une mise en page.

useSelectedLayoutSegment ne renvoie 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 parallelRoutesKey, qui permet de lire le segment de route actif dans cet emplacement.

Valeur retournée

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

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

Mise en page	URL visitée	Segment retourné
`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'`

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 composant *client* sera importé dans une mise en page de blog
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Naviguer vers `/blog/hello-world` renverra 'hello-world'
  // pour le segment de mise en page 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>
  )
}

'use client'

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

// Ce composant *client* sera importé dans une mise en page de blog
export default function BlogNavLink({ slug, children }) {
  // Naviguer vers `/blog/hello-world` renverra 'hello-world'
  // pour le segment de mise en page 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>
  )
}

// Importe le Composant Client dans une mise en page parente (Composant Serveur)
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>
  )
}

// Importe le Composant Client dans une mise en page parente (Composant Serveur)
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>
  )
}

Historique des versions

Version	Changements
`v13.0.0`	Introduction de `useSelectedLayoutSegment`.

Paramètres

Valeur retournée

Exemples

Création d'un composant de lien actif

Historique des versions

On this page