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 | /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
для создания компонента активной ссылки, который меняет стиль в зависимости от активного сегмента. Например, список избранных постов в боковой панели блога:
// Импортируем Клиентский Компонент в родительский макет (Серверный Компонент)
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 . |