Next.js 中的 activeClassName

在 Next.js 中，我们经常会使用 Link 组件来实现单页应用内的路由跳转。当 Link 组件渲染的 a 标签被点击后，它会给这个 a 标签添加一个名为“active”的类名。如果我们想要自定义这个类名，那么可以使用 activeClassName 属性。

activeClassName 的用法

activeClassName 是 Link 组件的一个可选属性，在使用时需要传入一个字符串类型的类名，例如：

import Link from 'next/link'

function NavMenu() {
  return (
    <div>
      <Link href="/home" activeClassName="selected">
        <a>主页</a>
      </Link>
      <Link href="/about" activeClassName="selected">
        <a>关于</a>
      </Link>
      <Link href="/contact">
        <a>联系我们</a>
      </Link>
    </div>
  )
}

上面的代码中，我们定义了三个 Link 组件，其中前两个使用了 activeClassName 属性并传入了一个名为 selected 的类名，第三个则没有使用 activeClassName 属性。

当用户访问 /home 或 /about 页面时，对应的 Link 组件中的 a 标签会被添加上 selected 类名。而在 /contact 页面访问时，联系我们这个链接则没有被添加 selected 类名。

如何自定义 activeClassName

默认情况下，Link 组件会在 a 标签上添加 active 类名，但是我们可以通过在 next.config.js 文件中定义 css 相关的配置来自定义这个类名。

例如，我们可以在 next.config.js 文件中添加以下内容：

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    localIdentName: '[name]__[local]___[hash:base64:5]',
  },
})

这里的 localIdentName 属性就是用来定义 active 类名的。具体的含义可以参考 css-loader 的文档。通过这种方式，我们可以自定义 Link 组件在 a 标签上添加的类名，从而使用自己喜欢的命名方式。