Створення та керування активними посиланнями
У веб-розробці поширеною практикою є виділення активних посилань залежно від поточної сторінки.
У Next.js це можна реалізувати за допомогою хука usePathname(). Цей хук перевіряє поточний шлях у додатку, що дозволяє динамічно підсвічувати відповідну сторінку за допомогою бібліотеки clsx.
Повернення до проєкту
Щоб використати хук usePathname(), перетворіть nav-links.tsx на клієнтський компонент. Почніть із додавання директиви "use client" на початку файлу.
Тепер можна використати хук usePathname та застосувати його.
Нарешті, використовуйте бібліотеку clsx для умовного застосування стилів. Встановіть умову так, щоб якщо pathname дорівнює link.href, змінювався колір фону на bg-neutral-600.
На практиці
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
How does the clsx library work for conditional styling?
Can you explain how usePathname determines the active link?
What should I do if the active link highlighting doesn't work as expected?
Awesome!
Completion rate improved to 2.08Створення та керування активними посиланнями
Свайпніть щоб показати меню
У веб-розробці поширеною практикою є виділення активних посилань залежно від поточної сторінки.
У Next.js це можна реалізувати за допомогою хука usePathname(). Цей хук перевіряє поточний шлях у додатку, що дозволяє динамічно підсвічувати відповідну сторінку за допомогою бібліотеки clsx.
Повернення до проєкту
Щоб використати хук usePathname(), перетворіть nav-links.tsx на клієнтський компонент. Почніть із додавання директиви "use client" на початку файлу.
Тепер можна використати хук usePathname та застосувати його.
Нарешті, використовуйте бібліотеку clsx для умовного застосування стилів. Встановіть умову так, щоб якщо pathname дорівнює link.href, змінювався колір фону на bg-neutral-600.
На практиці
Дякуємо за ваш відгук!
