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 はクライアントコンポーネントのフックであり、レイアウトはデフォルトでサーバーコンポーネントであるため、通常はレイアウトにインポートされたクライアントコンポーネントを通じて呼び出されます。
• 返されるセグメントにはルートグループが含まれており、UI に含めたくない場合があります。filter() メソッドを使用して、角括弧で始まる項目を削除できます。

パラメータ

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

戻り値

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

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

バージョン履歴