如何在 NextJS 中为活动链接添加样式

<Header>在我最近的项目中，我想在点击时更改活动导航链接的背景颜色。<Link>以前在 React 中使用 React-Router 时，我可以在 中添加一个 类来更改活动导航链接的activeClassName样式<Link>。但 NextJS 不支持这个内置功能<Link>。接下来我将向您展示两者的区别，以及如何在 NextJS 中将 类添加到 类<Link>。

目录

1. React 的activeClassName
2. 在 NextJS 中创建活动链接

1. React 的activeClassName

<Link>当渲染元素与当前 URL 匹配时，会调用此特殊版本的<NavLink>标签，并为其添加样式属性。添加样式有两种不同的方法。

activeClassName: 字符串

当元素处于活动状态时，通过以下方式赋予该类：

<NavLink to="/about" activeClassName="active">
  About
</NavLink>

activeStyle：对象

当元素处于活动状态时，样式将应用于元素，方法是：

<NavLink to="/about" activeStyle={{fontWeight: "bold"}}>
  About
</NavLink>

2. 在 NextJS 中创建活动链接

NextJS 的默认<Link>组件无法区分活动链接和非活动链接。在 NextJS 中，你可以使用内置路由器来检测活动链接。

我正在使用useRouter“Header 函数组件”内的钩子并创建了一个三元运算符来检查<Link>样式是否与当前显示的路线匹配。

代码如下：

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

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

  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

有关更多信息，next/router请查看文档。

感谢您的阅读和付出。我非常感激！