useSelectedLayoutSegments 是一个客户端组件钩子，它允许你读取调用它的 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>
)
}'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>
)
}值得注意:
const segments = useSelectedLayoutSegments(parallelRoutesKey?: string)useSelectedLayoutSegments 可选地 接受一个 parallelRoutesKey，它允许你读取该插槽内的活跃路由段。
useSelectedLayoutSegments 返回一个字符串数组，其中包含比调用该钩子的布局低一级的活跃段。如果不存在，则返回一个空数组。
例如，给定以下的 Layouts 和 URL，返回的段将是：
| 布局 | 访问的 URL | 返回的段 |
|---|---|---|
app/layout.js | / | [] |
app/layout.js | /dashboard | ['dashboard'] |
app/layout.js | /dashboard/settings | ['dashboard', 'settings'] |
app/dashboard/layout.js | /dashboard | [] |
app/dashboard/layout.js | /dashboard/settings | ['settings'] |
| 版本 | 更改 |
|---|---|
v13.0.0 | 引入了 useSelectedLayoutSegments。 |