useSelectedLayoutSegment

useSelectedLayoutSegmentは、呼び出し元のレイアウトの1階層下にあるアクティブなルートセグメントを読み取ることができるクライアントコンポーネント用フックです。

親レイアウト内のタブなど、アクティブな子セグメントに応じてスタイルを変更するナビゲーションUIに便利です。

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

  return <p>アクティブなセグメント: {segment}</p>
}

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

  return <p>アクティブなセグメント: {segment}</p>
}

知っておくと便利:

useSelectedLayoutSegmentはクライアントコンポーネント用フックであり、レイアウトはデフォルトでサーバーコンポーネントであるため、通常はレイアウトにインポートされたクライアントコンポーネントから呼び出されます。

useSelectedLayoutSegmentは1階層下のセグメントのみを返します。すべてのアクティブなセグメントを取得するには、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>
  )
}

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

// クライアントコンポーネントを親レイアウト（サーバーコンポーネント）にインポート
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 { 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`が導入されました。

パラメータ

戻り値

使用例

アクティブなリンクコンポーネントの作成

バージョン履歴

On this page