Menu

useSelectedLayoutSegment

useSelectedLayoutSegment ist ein Client-Komponenten-Hook, mit dem Sie das aktive Routensegment eine Ebene unter dem Layout, in dem er aufgerufen wird, lesen können.

Er ist nützlich für Navigations-Benutzeroberflächen, wie Tabs innerhalb eines übergeordneten Layouts, die ihren Stil abhängig vom aktiven untergeordneten Segment ändern.

app/example-client-component.tsx
TypeScript
'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  return <p>Aktives Segment: {segment}</p>
}

Hinweis:

  • Da useSelectedLayoutSegment ein Client-Komponenten-Hook ist und Layouts standardmäßig Server-Komponenten sind, wird useSelectedLayoutSegment in der Regel über eine Client-Komponente 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, mit dem Sie das aktive Routensegment innerhalb dieses Slots lesen können.

Rückgabewert

useSelectedLayoutSegment gibt eine Zeichenfolge des aktiven Segments oder null zurück, wenn keines existiert.

Bei den folgenden Layouts und URLs wäre das zurückgegebene Segment:

LayoutBesuchte URLZurückgegebenes Segment
app/layout.js/null
app/layout.js/dashboard'dashboard'
app/dashboard/layout.js/dashboardnull
app/dashboard/layout.js/dashboard/settings'settings'
app/dashboard/layout.js/dashboard/analytics'analytics'
app/dashboard/layout.js/dashboard/analytics/monthly'analytics'

Beispiele

Erstellen einer aktiven Link-Komponente

Sie können useSelectedLayoutSegment verwenden, um eine aktive Link-Komponente zu erstellen, die ihren Stil je nach aktivem Segment ändert. Zum Beispiel eine Liste mit empfohlenen Beiträgen in der Seitenleiste eines Blogs:

app/blog/blog-nav-link.tsx
TypeScript
'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}`}
      // Stil ändern, je nachdem ob der Link aktiv ist
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}
app/blog/layout.tsx
TypeScript
// Client-Komponente in ein übergeordnetes Layout (Server-Komponente) importieren
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>
  )
}

Versionshistorie

VersionÄnderungen
v13.0.0useSelectedLayoutSegment eingeführt.