useSelectedLayoutSegments

useSelectedLayoutSegments est un hook Client Component qui vous permet de lire les segments de route actifs en dessous du Layout depuis lequel il est appelé.

Il est utile pour créer des interfaces utilisateur dans les Layouts parents qui ont besoin de connaître les segments enfants actifs, comme des fil d'Ariane (breadcrumbs).

'use client'

import { useSelectedLayoutSegments } from 'next/navigation'

export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()

  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}

Bon à savoir :

• Comme useSelectedLayoutSegments est un hook Client Component et que les Layouts sont par défaut des Server Components, useSelectedLayoutSegments est généralement appelé via un Client Component importé dans un Layout.
• Les segments retournés incluent les Route Groups, que vous ne voudrez peut-être pas inclure dans votre interface. Vous pouvez utiliser la méthode filter pour supprimer les éléments commençant par un crochet.

Paramètres

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

Valeur retournée

useSelectedLayoutSegments retourne un tableau de chaînes contenant les segments actifs situés un niveau en dessous du Layout depuis lequel le hook a été appelé. Ou un tableau vide si aucun segment n'existe.

Par exemple, avec les Layouts et URLs ci-dessous, les segments retournés seraient :

Historique des versions