useSelectedLayoutSegment

useSelectedLayoutSegment ist ein Client Component-Hook, der Ihnen das Lesen des aktiven Routensegments eine Ebene unterhalb des Layouts ermöglicht, von dem aus er aufgerufen wird.

Er ist nützlich für Navigations-UI, wie z.B. Tabs innerhalb eines übergeordneten Layouts, die ihren Stil basierend auf dem aktiven Kindsegment ändern.

'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 das Lesen des aktiven Routensegments innerhalb dieses Slots ermöglicht.

Rückgabewerte

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, die ihren Stil basierend auf dem aktiven 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 Layoutsegment 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 Layoutsegment 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ückgabewerte

Beispiele

Erstellen einer aktiven Link-Komponente

Versionsverlauf

On this page