useSelectedLayoutSegment

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

¥useSelectedLayoutSegment is a Client Component hook that lets you read the active route segment one level below the Layout it is called from.

它对于导航 UI 很有用，例如父布局内的选项卡根据活动子段更改样式。

¥It is useful for navigation UI, such as tabs inside a parent layout that change style depending on the active child segment.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

很高兴知道：

¥Good to know:

• 由于 useSelectedLayoutSegment 是 客户端组件 钩子，并且布局默认为 服务器组件，因此通常通过导入到布局中的客户端组件来调用 useSelectedLayoutSegment。

  ¥Since useSelectedLayoutSegment is a Client Component hook, and Layouts are Server Components by default, useSelectedLayoutSegment is usually called via a Client Component that is imported into a Layout.

• useSelectedLayoutSegment 仅返回向下一级的段。要返回所有活动段，请参阅 useSelectedLayoutSegments

  ¥useSelectedLayoutSegment only returns the segment one level down. To return all active segments, see useSelectedLayoutSegments

参数

¥Parameters

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment 可选择接受 parallelRoutesKey，它允许你读取该槽内的活动航路段。

¥useSelectedLayoutSegment optionally accepts a parallelRoutesKey, which allows you to read the active route segment within that slot.

返回

¥Returns

useSelectedLayoutSegment 返回活动段的字符串，如果不存在则返回 null。

¥useSelectedLayoutSegment returns a string of the active segment or null if one doesn't exist.

例如，给定下面的布局和 URL，返回的段将是：

¥For example, given the Layouts and URLs below, the returned segment would be:

布局	访问过的网址	返回的段
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'

示例

¥Examples

创建活动链接组件

¥Creating an active link component

你可以使用 useSelectedLayoutSegment 创建一个活动链接组件，该组件根据活动段更改样式。例如，博客侧边栏中的精选帖子列表：

¥You can use useSelectedLayoutSegment to create an active link component that changes style depending on the active segment. For example, a featured posts list in the sidebar of a blog:

'use client'

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

// This *client* component will be imported into a blog layout
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Navigating to `/blog/hello-world` will return 'hello-world'
  // for the selected layout segment
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

'use client'

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

// This *client* component will be imported into a blog layout
export default function BlogNavLink({ slug, children }) {
  // Navigating to `/blog/hello-world` will return 'hello-world'
  // for the selected layout segment
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment

  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

// Import the Client Component into a parent Layout (Server Component)
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>
  )
}

// Import the Client Component into a parent Layout (Server Component)
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>
  )
}

版本历史

¥Version History

版本	变化
v13.0.0	useSelectedLayoutSegment 推出。