useSelectedLayoutSegments

useSelectedLayoutSegments 是一个 Client Component hook，它允许你读取调用它的 Layout 下方的活动路由段。

它对于在父 Layout 中创建需要了解活动子段的 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 hook，而 Layouts 默认是 Server Components，因此 useSelectedLayoutSegments 通常通过导入到 Layout 中的 Client Component 来调用。
• 返回的段包含 Route Groups，你可能不希望将其包含在 UI 中。你可以使用 filter 数组方法来移除以括号开头的项。

参数

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

useSelectedLayoutSegments 可选接受一个 parallelRoutesKey，允许你读取该插槽内的活动路由段。

返回值

useSelectedLayoutSegments 返回一个字符串数组，包含从调用 hook 的 layout 向下一级的活动段。如果不存在则返回空数组。

例如，给定以下 Layouts 和 URLs，返回的段将是：

版本历史