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 parallelRoutesKey
Bu, 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. |