useSelectedLayoutSegments

useSelectedLayoutSegments は、呼び出し元のレイアウトより下位の現在アクティブなルートセグメントを読み取るためのクライアントコンポーネントフックです。

パンくずリストのように、アクティブな子セグメントを把握する必要がある親レイアウトのUIを作成するのに役立ちます。

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

知っておくと良いこと:

• useSelectedLayoutSegments は クライアントコンポーネント のフックですが、レイアウトはデフォルトで サーバーコンポーネント であるため、通常は useSelectedLayoutSegments をレイアウトにインポートされたクライアントコンポーネント経由で呼び出します。
• 返されるセグメントには、UIに含めたくない可能性のある ルートグループ も含まれます。ブラケットで始まる項目を削除するには、filter 配列メソッドを使用できます。

Parameters

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

戻り値

useSelectedLayoutSegments は、フックが呼び出されたレイアウトより1つ下のレベルのアクティブなセグメントを含む文字列の配列を返します。存在しない場合は空の配列を返します。

たとえば、以下のレイアウトと URL の場合、返されるセグメントは次のようになります。

バージョン履歴