︙

useSelectedLayoutSegments

useSelectedLayoutSegments は、呼び出し元の Layout の以下のアクティブな route セグメントを読み取ることができる Client Component hookです。

breadcrumbs のようなアクティブな子セグメントの知識が必要な親 Layout で 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>
  )
}

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の hook であり、レイアウトはServer Componentsが default であるため、通常useSelectedLayoutSegmentsは Layout にインポートされた Client Component を介して呼び出されます。

返されるセグメントには、UI に含めたくない可能性があるRoute Groupsが含まれます。filter()配列の method を使用して、括弧で start するアイテムを削除することができます。

Parameters

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

Returns

useSelectedLayoutSegmentsは、 hook が呼び出された layout から一つ下のレベルのアクティブなセグメントを含んだ文字列の配列を返します。もしそれが存在しない場合には、 empty 配列を返します。

例えば、以下の Layouts と URLs が与えられた場合、返されるセグメントは以下の通りです：

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']`

Version History

Version	Changes
`v13.0.0`	`useSelectedLayoutSegments` 導入されました。