useSelectedLayoutSegments

useSelectedLayoutSegments çağrıldığı Düzenin altındaki etkin rota segmentlerini okumanızı sağlayan bir İstemci Bileşeni kancasıdır.

Ekmek kırıntıları gibi aktif alt segmentler hakkında bilgiye ihtiyaç duyan üst Düzenlerde kullanıcı arayüzü oluşturmak için kullanışlıdır.

app/example-client-component.tsx
'use client'
 
import { useSelectedLayoutSegments } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segments = useSelectedLayoutSegments()
 
  return (
    <ul>
      {segments.map((segment, index) => (
        <li key={index}>{segment}</li>
      ))}
    </ul>
  )
}

Bildiğim iyi oldu:

  • useSelectedLayoutSegments bir İstemci Bileşeni kancası olduğundan ve Düzenler varsayılan olarak Sunucu Bileşenleri olduğundan, useSelectedLayoutSegments genellikle bir Düzene içe aktarılan bir İstemci Bileşeni aracılığıyla çağrılır.
  • Döndürülen segmentler, kullanıcı arayüzünüze dahil edilmesini istemeyebileceğiniz Rota Gruplarını içerir. Ayraçla başlayan öğeleri kaldırmak için filter() dizi yöntemini kullanabilirsiniz.

Parameters

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

Returns

useSelectedLayoutSegments Kancanın çağrıldığı düzenden bir seviye aşağıdaki etkin segmentleri içeren bir string dizisi döndürür. Veya hiçbiri yoksa boş bir dizi.

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

LayoutVisited URLReturned Segments
app/layout.js/[]
app/layout.js/dashboard['dashboard']
app/layout.js/dashboard/settings['dashboard', 'settings']
app/dashboard/layout.js/dashboard[]
app/dashboard/layout.js/dashboard/settings['settings']

Version History

VersionChanges
v13.0.0useSelectedLayoutSegments introduced.