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

'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の場合、返されるセグメントは次のようになります:

レイアウト	アクセスURL	返されるセグメント
`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']`

バージョン履歴

バージョン	変更内容
`v13.0.0`	`useSelectedLayoutSegments` が導入されました。

パラメータ

戻り値

バージョン履歴

On this page