useSelectedLayoutSegment

useSelectedLayoutSegment ist ein Client Component-Hook, der Ihnen ermöglicht, das aktive Routensegment eine Ebene unterhalb des Layouts zu lesen, 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 je nach aktivem 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 zurückzugeben, siehe useSelectedLayoutSegments

Parameter

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

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

Rückgabewert

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

Beispielsweise würden bei den folgenden Layouts und URLs die folgenden Segmente zurückgegeben:

Layout	Aufgerufene URL	Rü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 je nach aktivem Segment ändert. Zum Beispiel eine Liste von vorgestellten Beiträgen 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 Layout-Segment zurück
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Ändert den Stil basierend darauf, 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 Layout-Segment zurück
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Ändert den Stil basierend darauf, 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