メインコンテンツまでスキップ

useSelectedLayoutSegment

useSelectedLayoutSegmentは、呼び出されたLayoutから1レベル下のアクティブなルートセグメントを読み取ることができるClient Componentフックです。

これは、ナビゲーション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>
}

Good to know:

  • useSelectedLayoutSegmentはClient Componentフックであり、LayoutはデフォルトでServer Componentsのため、通常useSelectedLayoutSegmentはLayoutにインポートされるClient Componentを介して呼ばれます。
  • useSelectedLayoutSegmentは1レベル下のセグメントのみを返します。すべてのアクティブなセグメントを返すには、useSelectedLayoutSegmentsを参照してください。

パラメータ​

const segment = useSelectedLayoutSegment(parallelRoutesKey?: string)

useSelectedLayoutSegmentはオプションでparallelRoutesKeyを受け入れ、そのスロット内のアクティブなルートセグメントを読み取ることができます。

戻り値​

useSelectedLayoutSegmentは、アクティブなセグメントの文字列を返すか、存在しない場合はnullを返します。

たとえば、以下のLayoutとURLの場合、返されるセグメントは次のようになります：

Layout訪問したURL返されるセグメント
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'

// この*client*コンポーネントは、ブログのレイアウトにインポートされます
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>
  )
}
app/blog/layout.tsx
// Client Componentを親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.0useSelectedLayoutSegmentを導入しました。