useSelectedLayoutSegments

useSelectedLayoutSegmentsは Client Component フックで、使用されるLayoutから下位にあるアクティブルートセグメントを読み取ることができます。

これは、パンくずリストなどアクティブな子セグメントを知る必要がある親 Layout 内で UI を作成するのに便利です。

TypeScript

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

JavaScript

app/example-client-component.js

'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 フックであり、Layout はデフォルトで Server Components であるため、useSelectedLayoutSegments は通常、Layout にインポートされる Client Component を介して呼び出されます。
• 戻り値のセグメントには Route Groups が含まれているかもしれず、それらをUIに含めたくない場合があります。ブラケットで始まるアイテムを削除するために配列の filter() メソッドを使うことができます。

パラメータ

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

戻り値

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

例えば、以下のような Layout と URL がある場合、返されるセグメントは次のようになります：

Layout	訪問した 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 が導入されました。