一种解决方案是在<a>元素中添加一个新的“内部元素”，例如<span>，并将event.stopPropagation()的onClick事件处理程序绑定到该内部元素。
这将导致<span>拦截并停止点击事件的传播，然后再将其冒泡到父<a>（默认情况下，这将导致浏览器导航到href url）。
您应该会发现，当鼠标悬停在<a>的href属性上时，此方法仍然为用户保留了指定给<a>属性的url的可见性：

<a href={menuItem.url}>
    <span onClick={e => {

        // Intercepts and prevents the event from propagating up to the parent <a>
        e.stopPropagation();

        // Your existing logic for the onClick event
        var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;

        for (let i = 0; checkedItems[i]; i++) {
            checkedItems[i].checked = false;
        }

        window.location.href = menuItem.url;

    }}> The text label for your link </span>
</a>

字符串
为了让这个方法工作，它假设在<a>的框边界（外边界）和内部<span>. Here's a jsFiddle（非jsx）的框边界之间没有填充，这说明了一般的想法。
希望能帮上忙！

Used This Code for prevent href 
=========================================
const [showSelect, setShowSelect] = useState(false)
 const toggle = () => setShowSelect(!showSelect)

<div className="card">
          <header className="card-header">
            <p className="card-header-title">
              Card title
            </p>
            <a onClick={() => toggle()} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span className="icon">
                <i className="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          {showSelect && (
            <div className="is-collapsible is-active">
              <div className="card-content">
                <p className="title is-4">
                  “There are two hard things in computer science: cache invalidation, naming things, and off-by-one
                  errors.”
                </p>
                <p className="subtitle is-5">
                  Jeff Atwood
                </p>
              </div>
            </div>
          )}

        </div>

字符串