Javascript 如果链接指向当前激活状态，如何禁用反应链接和功能；第页“；

我有一个包含链接列表的导航组件。我需要运行一个功能时，这些点击除了链接（去特定的页面）。到目前为止，除了用户点击活动页面的链接外，我所做的一切都是有效的

如果用户已经在该页面上，我如何修改我的代码，使我的函数不运行，链接被禁用

以下是我所拥有的：

    class HeaderMenu extends Component {

      navFunc = () => {
        //some functionality
      }

  render() {

    return (
      <div>
        <div className="sidebar">
          <ul className="header">
            <li onClick={this.navFunc}>
              <Link href="/index">
                <a>home</a>
              </Link>
            </li>
            <li onClick={this.navFunc}>
              <Link href="/about">
                <a>about</a>
              </Link>
            </li>
            <li onClick={this.navFunc}>
              <Link href="/other">
                <a>other</a>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}

类头菜单扩展组件{
navFunc=（）=>{
//一些功能
}
render（）{
返回(




其他


)
}
}

您可以创建一个

ActiveLink

组件，单击该组件时将跳过推送操作

此

ActiveLink

组件基于中的示例（向上滚动查看），我尚未对其进行测试

import { withRouter } from 'next/router'

const ActiveLink = ({ children, router, href }) => {
  const active = router.pathname === href

  const style = {
    marginRight: 10,
    color: active ? 'red' : 'black'
  }

  const handleClick = (e) => {
    e.preventDefault()
    active || router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default withRouter(ActiveLink)

从“下一个/路由器”导入{withRouter}
const-ActiveLink=（{子项，路由器，href}）=>{
const active=router.pathname===href
常量样式={
marginRight:10，
颜色：活动？“红色”：“黑色”
}
常量handleClick=（e）=>{
e、 预防默认值（）
活动| |路由器.推送（href）
}
返回(
)
}
使用路由器导出默认值（ActiveLink）

一种方法是使用状态。当前页面是如何定义的，它在哪个组件中呈现？您正在使用路由库吗？我正在使用next.js进行路由。我将如何使用状态？你可能想考虑一个路由库不是那么小。您完全可以在这里通过

window.location

找到解决方案，但其他路由库会将url、url参数和查询作为道具提供给您。