在Next.js中使用路由器来检测活动链接

如何使用Next.js Router检测活动链接并为其分配一个类别，这样我们就可以用CSS为其设置样式了

发表于2019年11月16日，最后更新于2021年7月7日

在处理链接时，一个非常重要的功能是确定什么是当前的URL，特别是为活动链接分配一个类，这样我们就可以将它与其他链接的样式不同。

例如，这在你的网站标题中特别有用。

next/link 中提供的Next.js默认的Link 组件并不能自动为我们做这个。

我们可以使用2种技术。一种是将逻辑添加到Link 的子代中。另一种技术是在另一个组件中使用Link，我们可以建立这个组件来处理这个逻辑。

让我们从第一个最简单的方法开始。

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const menu = [
  { title: 'Home', path: '/home' },
  { title: 'Explore', path: '/explore' },
  { title: 'Notifications', path: '/notifications' },
]

const Sidebar = () => {
  const router = useRouter()

  return (
    <div>
      {menu.map((item, index) => {
        return (
          <Link key={index} href={item.path}>
            <a
              className={`cursor-pointer ${
                router.pathname === item.path
                  ? 'text-blue-500'
                  : 'hover:bg-gray-900 hover:text-blue-500'
              }`}
            >
              {item.title}
            </a>
          </Link>
        )
      })}
    </div>
  )
}

export default Sidebar

我建议这样做，因为这是你能做的最简单的事情。

另一个技术手段是创建我们自己的链接组件，我们把它存储在/components 文件夹中的一个文件MyLink.js ，然后导入它，而不是默认的next/link 。

在组件内部，我们确定当前的路径名称是否与该组件的href 道具相匹配，如果是，我们就将text-blue-500 类附加到子类中。

当然，你可以使用你自己的类。这是一个Tailwind类，使文本为蓝色。

最后，我们使用React.cloneElement() ，返回这个带有更新类的子类。

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

const MyLink = ({ href, children }) => {
  const router = useRouter()

  let className = children.props.className || ''
  if (router.pathname === href) {
    className = `${className} text-blue-500`
  }

  return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}

export default MyLink

我们现在可以在其他组件中使用这个MyLink 组件。

import MyLink from 'components/MyLink'

...
<MyLink
  href={'blog'}
>
  <a>Blog</a>
</MyLink>
<MyLink
  href={'about'}
>
  <a>About</a>
</MyLink>

在这种情况下，与第一种技术相比，"用户 "代码更简单，因为你将逻辑移到了MyLink 。