Menu

useSelectedLayoutSegment

useSelectedLayoutSegmentは、呼び出されたレイアウトの1レベル下のアクティブなルートセグメントを読み取ることができるクライアントコンポーネントのフックです。

親レイアウト内で、アクティブな子セグメントに応じてスタイルが変化するタブなどのナビゲーションUIに役立ちます。

app/example-client-component.tsx
TypeScript
'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/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
TypeScript
'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>
  )
}
app/blog/layout.tsx
TypeScript
// クライアントコンポーネントを親レイアウト（サーバーコンポーネント）にインポート
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が導入されました。