useSelectedLayoutSegment

useSelectedLayoutSegment 是一個客戶端元件 (Client Component) 鉤子，可讓您讀取從呼叫它的 Layout 往下一個層級 的當前路由區段。

這對於導航 UI 非常有用，例如父佈局中的標籤，可以根據當前活動的子區段改變樣式。

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

須知事項:

由於 useSelectedLayoutSegment 是一個客戶端元件 (Client Component) 鉤子，而佈局 (Layouts) 預設是伺服器元件 (Server Components)，因此 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 來建立一個活動連結元件，該元件會根據當前活動區段改變樣式。例如，部落格側邊欄中的精選文章列表：

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

版本歷史

版本	變更
`v13.0.0`	引入 `useSelectedLayoutSegment`。

參數

返回值

範例

建立活動連結元件

版本歷史

On this page