跳至內容
API 參考函式useSelectedLayoutSegment

useSelectedLayoutSegment

useSelectedLayoutSegment 是一個客戶端元件 hook，可讓您讀取從中呼叫的佈局下方一層的活動路由區段。

它適用於導覽 UI，例如根據活動子區段更改樣式的父佈局內的索引標籤。

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>
}

須知:

  • 由於 useSelectedLayoutSegment 是一個 客戶端元件 hook，而佈局預設為 伺服器元件，因此 useSelectedLayoutSegment 通常是透過匯入佈局的客戶端元件來呼叫的。
  • useSelectedLayoutSegment 只會回傳下一層的區段。要回傳所有活動區段，請參閱 useSelectedLayoutSegments

參數 

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegment 可以選擇性地接受一個 parallelRoutesKey 參數，讓您讀取該區塊中的活動路由區段。

回傳值

useSelectedLayoutSegment 會回傳活動區段的字串，如果不存在則回傳 null。

例如，根據以下的佈局和網址，回傳的區段將會是：

佈局造訪的網址回傳的區段
app/layout.js/null
app/layout.js/dashboard'dashboard'
app/dashboard/layout.js/dashboardnull
app/dashboard/layout.js/dashboard/settings'settings'
app/dashboard/layout.js/dashboard/analytics'analytics'
app/dashboard/layout.js/dashboard/analytics/monthly'analytics'

範例 建立一個活動連結元件

您可以使用 useSelectedLayoutSegment 建立一個活動連結元件，根據活動區段來更改樣式。例如，部落格側邊欄中的精選文章列表。

app/blog/blog-nav-link.tsx
'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>
  )
}
app/blog/layout.tsx
// 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>
  )
}

版本歷史紀錄

版本變更
v13.0.0新增 useSelectedLayoutSegment。