useSelectedLayoutSegment

useSelectedLayoutSegment — это хук Клиентского Компонента, который позволяет читать активный сегмент маршрута на один уровень ниже макета, из которого он вызывается.

Он полезен для навигационного интерфейса, например, вкладок внутри родительского макета, которые меняют стиль в зависимости от активного дочернего сегмента.

'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 обычно вызывается через Клиентский Компонент, который импортируется в макет.
  • 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/dashboardnull
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.