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 を受け入れ、そのスロット内のアクティブなルートセグメントを読み取ることができます。

戻り値

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

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

バージョン履歴