使用選取的佈局區段們 (useSelectedLayoutSegments)

useSelectedLayoutSegments 是一個客戶端元件 hook，可讓您讀取呼叫它的佈局下方的有效路由區段。

它適用於在需要知道有效子區段（例如麵包屑）的父佈局中建立 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>
  )
}

注意事項 (Good to know):

• 由於 useSelectedLayoutSegments 是一個 客戶端元件 (Client Component) 的 hook，而佈局 (Layouts) 預設是 伺服器端元件 (Server Components)，因此 useSelectedLayoutSegments 通常透過匯入佈局的客戶端元件來呼叫。
• 返回的區段包含 路由群組 (Route Groups)，您可能不希望將其包含在您的 UI 中。您可以使用 filter() 陣列方法移除以括號開頭的項目。

參數

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments 可以選擇性地接受一個 parallelRoutesKey 參數，讓您可以讀取該位置中的活動路由區段。

回傳值

useSelectedLayoutSegments 會返回一個字串陣列，其中包含從呼叫此 hook 的佈局下一層的活動區段。如果不存在，則返回一個空陣列。

例如，根據以下佈局和網址，返回的區段將會是

版本歷史記錄