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 はクライアントコンポーネント用フックであり、レイアウトはデフォルトでサーバーコンポーネントであるため、通常はレイアウトにインポートされたクライアントコンポーネントから呼び出されます。
• 返されるセグメントにはルートグループが含まれる場合があり、UI に表示したくないことがあります。filter メソッドを使用して、括弧で始まる項目を除外できます。

パラメータ

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

戻り値

useSelectedLayoutSegments は、フックが呼び出されたレイアウトの1階層下にあるアクティブなセグメントの文字列配列を返します。存在しない場合は空の配列を返します。

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

バージョン履歴