useSelectedLayoutSegments

useSelectedLayoutSegmentsは、呼び出したLayoutより下位のアクティブなルートセグメントを読み取ることができるClient Componentフックです。

パンくずリストなど、アクティブな子セグメントの情報が必要な親Layoutsでの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はClient Componentフックであり、LayoutsはデフォルトでServer Componentsであるため、useSelectedLayoutSegmentsは通常、LayoutにインポートされたClient Componentから呼び出されます。
• 返されるセグメントにはRoute Groupsが含まれており、これらをUIに含めたくない場合があります。角括弧で始まるアイテムを削除するには、filter配列メソッドを使用できます。

Parameters

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

Returns

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

以下のLayouts と URLが与えられた場合、返されるセグメントは以下のようになります：

Version History