Question

我有一个导航组件，其中包含一个包含链接的列表。除了链接（转到特定页面）之外，我还需要在单击它们时运行一个函数。到目前为止我所做的工作除非用户点击活动页面的链接。

如何修改我的代码，以便我的功能无法运行，如果用户已经在该页面上，则链接将被禁用？

这就是我所拥有的：

{{1}}

Answer 1

您可以创建一个ActiveLink组件，在点击时会跳过推送操作。

此ActiveLink组件基于next.js documentation中的示例（向上滚动查看），我还没有对其进行测试。

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)

如果链接指向当前活动的＆＃34;页面＆＃34;如何禁用React链接和功能

1 个答案: