useSelectedLayoutSegment

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

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

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

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

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

Полезно знать:

Поскольку useSelectedLayoutSegment является хуком Клиентского Компонента (Client Component), а макеты по умолчанию являются Серверными Компонентами (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>
  )
}

'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