useSelectedLayoutSegment

useSelectedLayoutSegment ist ein Client Component Hook, der es ermöglicht, das aktive Routensegment eine Ebene unterhalb des Layouts auszulesen, von dem aus er aufgerufen wird.

Er ist nützlich für Navigations-UI, wie z.B. Tabs innerhalb eines übergeordneten Layouts, deren Stil sich abhängig vom aktiven Kindsegment ändert.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

Wissenswert:

Da useSelectedLayoutSegment ein Client Component-Hook ist und Layouts standardmäßig Server Components sind, wird useSelectedLayoutSegment normalerweise über eine Client Component aufgerufen, die in ein Layout importiert wird.

useSelectedLayoutSegment gibt nur das Segment eine Ebene darunter zurück. Um alle aktiven Segmente zu erhalten, siehe useSelectedLayoutSegments

Parameter

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment akzeptiert optional einen parallelRoutesKey, der es ermöglicht, das aktive Routensegment innerhalb dieses Slots auszulesen.

Rückgabewert

useSelectedLayoutSegment gibt einen String des aktiven Segments zurück oder null, falls keines existiert.

Beispielsweise würde bei den unten angegebenen Layouts und URLs das zurückgegebene Segment wie folgt aussehen:

Layout	Aufgerufene URL	Zurückgegebenes Segment
`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'`

Sie können useSelectedLayoutSegment verwenden, um eine aktive Link-Komponente zu erstellen, deren Stil sich abhängig vom aktiven Segment ändert. Beispielsweise eine Liste hervorgehobener Beiträge in der Seitenleiste eines Blogs:

'use client'

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

// Diese *Client*-Komponente wird in ein Blog-Layout importiert
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Die Navigation zu `/blog/hello-world` gibt 'hello-world'
  // für das ausgewählte Layoutsegment zurück
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Ändert den Stil abhängig davon, ob der Link aktiv ist
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

'use client'

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

// Diese *Client*-Komponente wird in ein Blog-Layout importiert
export default function BlogNavLink({ slug, children }) {
  // Die Navigation zu `/blog/hello-world` gibt 'hello-world'
  // für das ausgewählte Layoutsegment zurück
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Ändert den Stil abhängig davon, ob der Link aktiv ist
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

// Importiert die Client Component in ein übergeordnetes Layout (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>
  )
}

// Importiert die Client Component in ein übergeordnetes Layout (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>
  )
}

Versionsverlauf

Version	Änderungen
`v13.0.0`	`useSelectedLayoutSegment` eingeführt.

Parameter

Rückgabewert

Beispiele

Erstellen einer aktiven Link-Komponente

Versionsverlauf

On this page