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()` 配列メソッドを使用して、角かっこで始まる項目を削除できます。

パラメータ

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

戻り値

レイアウト	アクセスした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	/dashboard/settings