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:
useSelectedLayoutSegmentsbir İstemci Bileşeni kancası olduğundan ve Düzenler varsayılan olarak Sunucu Bileşenleri olduğundan,useSelectedLayoutSegmentsgenellikle 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:
| Layout | Visited URL | Returned 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
| Version | Changes |
|---|---|
v13.0.0 | useSelectedLayoutSegments introduced. |