useSelectedLayoutSegment

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

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

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const segment = useSelectedLayoutSegment()
 
  return <p>Active segment: {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`	`/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'
 
// This *client* component will be imported into a blog layout
export default function BlogNavLink({
  slug,
  children,
}: {
  slug: string
  children: React.ReactNode
}) {
  // Navigating to `/blog/hello-world` will return 'hello-world'
  // for the selected layout segment
  const segment = useSelectedLayoutSegment()
  const isActive = slug === segment
 
  return (
    <Link
      href={`/blog/${slug}`}
      // Change style depending on whether the link is active
      style={{ fontWeight: isActive ? 'bold' : 'normal' }}
    >
      {children}
    </Link>
  )
}

// Import the Client Component into a parent 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.0`	`useSelectedLayoutSegment` представлен.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment