useSelectedLayoutSegment

useSelectedLayoutSegment 是一个客户端组件钩子，让你可以读取调用它的布局下方一个级别的活动路由段。

它对于导航 UI 很有用，例如父布局中的标签页，根据活动子段改变样式。

TypeScript

app/example-client-component.tsx

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>Active segment: {segment}</p>
}

JavaScript

app/example-client-component.js

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()

  return <p>Active segment: {segment}</p>
}

提示：

• 由于 useSelectedLayoutSegment 是一个 客户端组件 钩子，而布局默认是 服务端组件，useSelectedLayoutSegment 通常通过导入到布局中的客户端组件来调用。
• useSelectedLayoutSegment 只返回向下一个级别的段。要返回所有活动段，请参阅 useSelectedLayoutSegments

参数

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

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 创建一个活动链接组件，根据活动段改变样式。例如，博客侧边栏中的特色文章列表：

TypeScript

app/blog/blog-nav-link.tsx

'use client'

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// 这个*客户端*组件将被导入到博客布局中
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // 导航到 `/blog/hello-world` 将为选中的布局段返回 'hello-world'
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // 根据链接是否活动来改变样式
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

JavaScript

app/blog/blog-nav-link.js

'use client'

import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

// 这个*客户端*组件将被导入到博客布局中
export default function BlogNavLink({ slug, children }) {
  // 导航到 `/blog/hello-world` 将为选中的布局段返回 'hello-world'
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // 根据链接是否活动来改变样式
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

TypeScript

app/blog/layout.tsx

// 将客户端组件导入到父布局（服务端组件）中
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

JavaScript

app/blog/layout.js

// 将客户端组件导入到父布局（服务端组件）中
import { BlogNavLink } from './blog-nav-link'
import getFeaturedPosts from './get-featured-posts'

export default async function Layout({ children }) {
  const featuredPosts = await getFeaturedPosts()
  return (
    <div>
      {featuredPosts.map((post) => (
        <div key={post.id}>
          <BlogNavLink slug={post.slug}>{post.title}</BlogNavLink>
        </div>
      ))}
      <div>{children}</div>
    </div>
  )
}

版本历史

版本	更改
v13.0.0	引入了 useSelectedLayoutSegment。