useSelectedLayoutSegment
useSelectedLayoutSegment
是一个 客户端组件 hook,允许你读取从调用它的布局 下一级 的活跃路由段。
它对于导航界面非常有用,例如父布局内的标签页,根据活跃的子段改变样式。
值得注意的是:
useSelectedLayoutSegment
可选地接受一个 parallelRoutesKey
,允许你读取该槽位内的活跃路由段。
useSelectedLayoutSegment
返回一个字符串形式的活跃段,如果不存在则返回 null
。
例如,给定以下布局和 URL,返回的段将是:
布局 | 访问的 URL | 返回的段 |
---|
app/layout.js | / | null |
app/layout.js | /dashboard | 'dashboard' |
app/dashboard/layout.js | /dashboard | null |
app/dashboard/layout.js | /dashboard/settings | 'settings' |
app/dashboard/layout.js | /dashboard/analytics | 'analytics' |
app/dashboard/layout.js | /dashboard/analytics/monthly | 'analytics' |
你可以使用 useSelectedLayoutSegment
创建一个根据活跃段改变样式的活跃链接组件。例如,博客侧边栏中的精选文章列表:
版本 | 变更 |
---|
v13.0.0 | 引入 useSelectedLayoutSegment 。 |