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

'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, voir 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 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 :

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

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

// Importe le Client Component dans un Layout parent (Server Component)
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 Client Component dans un Layout parent (Server Component)
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