NextJS добавляет стиль динамической активной ссылке

Question

У меня более 5 категорий, в которых есть разные продукты. Итак, в папке с моими страницами у меня есть файл с именем [...slug].js. Все эти URL-адреса имеют разные имена;

Для Ex это мой URL;

• / телефоны
• / ноутбуки
• /ТВ

..и я хочу добавить имена классов к этим ссылкам, когда они активны, чтобы я мог добавить к ним некоторый стиль.

        import Link from 'next/link';
  import { useRouter } from 'next/router';

  export const Header = () => {
    const router = useRouter();

    return (
      <header>
        <Link href="/phones">
          <a className={router.pathname == "/phones" ? "active" : ""}>
            Phones
          </a>
        </Link>
        <Link href="/laptops">
          <a className={router.pathname == "/laptops" ? "active" : ""}>
            Laptops
          </a>
        </Link>
        <Link href="/tv">
          <a className={router.pathname == "/tv" ? "active" : ""}>
            TV
          </a>
        </Link>
      </header>
    )
  }

Однако, когда я проверяю router.pathname при переходе по этим ссылкам, URL-адрес отображается как /[...slug]. Есть ли другой способ получить фактическое имя URL-адреса для динамических URL-адресов на NextJS

Answer 1

Вам нужен путь, показанный в браузере, включая параметры поиска,

        const { data: genreData } = useGetGenreQuery({});
  const { asPath } = useRouter();


  <Link
      key={key}
      className={asPath == `/genre/${item.id}` ? "active" : ""}
      href={`/genre/${item.id}`}>
      <li className="cursor-pointer"> {item.name} </li>
  </Link>