如果链接指向当前活动的“页面”，如何禁用React链接和功能

Question

我有一个包含链接列表的导航组件。 除了链接（转到特定页面）之外，我还需要在单击这些函数时运行一个函数。 到目前为止，我的工作是正常的，除非用户单击指向活动页面的链接。

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

这是我所拥有的：

    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>
    )
  }
}

Answer 1

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

该ActiveLink组件基于next.js文档中的示例（向上滚动以查看它），而我尚未对其进行测试。

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)