0

我有超过 5 个类别，其中包含不同的产品。所以在我的 pages 文件夹中，我有一个名为 [...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]。有没有其他方法可以获取 NextJS 上动态 URL 的实际 URL 名称

4

0 回答 0