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 Component)，因此通常需要通过导入到布局中的客户端组件来调用 useSelectedLayoutSegments。
• 返回的路由片段包含路由组 (Route Groups)，您可能不希望这些内容出现在 UI 中。可以使用 filter 数组方法来移除以括号开头的项。

参数

const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)

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

返回值

useSelectedLayoutSegments 返回一个字符串数组，包含从调用该钩子的布局向下一个级别的活动路由片段。如果不存在则返回空数组。

例如，给定以下布局和访问的 URL，返回的路由片段如下：

版本历史