useSelectedLayoutSegments

useSelectedLayoutSegments 是一個客戶端元件 (Client Component) 鉤子，可讓您讀取從中呼叫此鉤子的佈局 (Layout) 下方的當前路由區段 (segments)。

這對於需要在父佈局中建立了解子區段狀態的 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) 鉤子，而佈局預設是伺服器元件 (Server Component)，因此通常會透過導入佈局的客戶端元件來呼叫 useSelectedLayoutSegments。
• 返回的區段包含路由群組 (Route Groups)，您可能不希望這些內容出現在 UI 中。可以使用 filter 陣列方法來移除以括號開頭的項目。

參數

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments 可選地 接受一個 parallelRoutesKey 參數，允許您讀取該插槽內的有效路由區段。

返回值

useSelectedLayoutSegments 返回一個字串陣列，包含從呼叫此鉤子的佈局往下一個層級的有效區段。如果不存在則返回空陣列。

例如，根據以下佈局和訪問的 URL，返回的區段會是：

版本歷史