useSelectedLayoutSegments

useSelectedLayoutSegmentsはClient 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:

• useSelectedLayoutSegmentsはClient 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 は次のとおりになります。

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

Version	Changes
v13.0.0	useSelectedLayoutSegments 導入