useSelectedLayoutSegment

useSelectedLayoutSegment çağrıldığı Düzenin bir seviye altındaki aktif rota segmentini okumanızı sağlayan bir İstemci Bileşeni kancasıdır.

Etkin alt segmente bağlı olarak stil değiştiren bir üst düzen içindeki sekmeler gibi gezinme kullanıcı arayüzü için kullanışlıdır.

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

Bildiğim iyi oldu:

  • useSelectedLayoutSegment bir İstemci Bileşeni kancası olduğundan ve Düzenler varsayılan olarak Sunucu Bileşenleri olduğundan, useSelectedLayoutSegment genellikle bir Düzene içe aktarılan bir İstemci Bileşeni aracılığıyla çağrılır.
  • useSelectedLayoutSegment yalnızca segmenti bir seviye aşağı döndürür. Tüm etkin segmentleri döndürmek için bkz. useSelectedLayoutSegments

Parameters 

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment isteğe bağlı olarak bir parallelRoutesKeyBu, o yuvadaki aktif rota segmentini okumanızı sağlar.

Returns

useSelectedLayoutSegment etkin segmentin bir dizesini veya yoksa null adresini döndürür.

Örneğin, aşağıdaki Düzenler ve URL'ler göz önüne alındığında, döndürülen segment şu şekilde olacaktır:

LayoutVisited URLReturned 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'

Examples

Etkin segmente bağlı olarak stil değiştiren etkin bir bağlantı bileşeni oluşturmak için useSelectedLayoutSegment adresini kullanabilirsiniz. Örneğin, bir blogun kenar çubuğundaki öne çıkan yazılar listesi:

app/blog/blog-nav-link.tsx
'use client'
 
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
 
// This *client* component will be imported into a blog layout
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Navigating to `/blog/hello-world` will return 'hello-world'
  // for the selected layout segment
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment
 
  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}
app/blog/layout.tsx
// Import the Client Component into a parent 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>
  )
}

Version History

VersionChanges
v13.0.0useSelectedLayoutSegment introduced.