メインコンテンツまでスキップ

useSelectedLayoutSegments

useSelectedLayoutSegmentsClient Componentのフックであり、呼び出されたレイアウト以下にあるアクティブなルート Segments を読み取ることができます。

これはパンくずリストのような、アクティブな子 Segments の情報が必要な親レイアウトの UI を作成するのに役立ちます。

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>
)
}

Good to know:

  • useSelectedLayoutSegmentsClient Componentのフックであり、レイアウトはデフォルトでServer Componentsであるため、useSelectedLayoutSegmentsは通常、レイアウトにインポートされた Client Component から呼び出されます。
  • 返される Segments には、UI に含めたくないルートグループが含まれる場合もあります。Segments から項目を削除するには、filter()メソッドを使用できます。

Parameters

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegmentsオプションparallelRoutesKeyを受け取り、そのスロット内のアクティブなルート Segment を読み取ることができます。

Returns

useSelectedLayoutSegmentsは、フックが呼び出されたレイアウトから 1 階層下のアクティブな Segments を含む文字列の配列を返します。存在しない場合は空の配列となります。

例えば、以下のレイアウトと URL が与えられた場合、返される Segments は次のとおりになります。

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 履歴

VersionChanges
v13.0.0useSelectedLayoutSegments 導入