javascript - 如果链接指向当前活动的“页面”，如何禁用 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>
    )
  }
}

标签： javascriptreactjs

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)