useSelectedLayoutSegments

useSelectedLayoutSegments 是一個客戶端元件 (Client Component) 鉤子，可讓您讀取從呼叫它的版面配置下方的當前路由區段。

這對於需要在父版面配置中建立了解當前子路由區段的 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 Components)，因此 useSelectedLayoutSegments 通常透過匯入到版面配置中的客戶端元件來呼叫。
• 返回的區段包含路由群組 (Route Groups)，您可能不希望這些內容出現在 UI 中。可以使用 filter() 陣列方法來移除以括號開頭的項目。

參數

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments 可選地 接受一個 parallelRoutesKey，這允許您讀取該插槽中的當前路由區段。

返回值

useSelectedLayoutSegments 返回一個字串陣列，包含從呼叫鉤子的版面配置往下一個層級的當前路由區段。如果不存在，則返回空陣列。

例如，根據下面的版面配置和訪問的 URL，返回的區段如下：

版本歷史