如何在react-router-dom中的<Link>标记内访问href？

问题描述

我在react-router-dom的Link标记中有一个href标记。链接在我的React.js应用程序中运行良好。我试图访问位于Link标记内的href标记，但是当我单击时，我将重定向到我的应用程序Link中指定的路由路径，而不是href URL。

<div class="col-md-8">
    <Link id="homeLink" to="/graduate-posts">
        <img class="img-fluid" src="https://i.imgur.com/vekPedd.png" alt="Card image cap" />
        <div class="card-img-overlay">
            <div class="homeLinkTextContainer">
                <div id="homeLinkTitleContainer">
                    <p id="homeLinkTitle">Graduates</p>
                </div>
                <div class="homeLinkText" id="homeLinkTextG">
                    <p>Coming Soon! Want To <strong><a href="click.com" id="wfu"> Write For Us? </a></strong></p>
                </div>
            </div>
        </div>
    </Link>
</div>

我正在尝试访问具有id =“ wfu”的href标记。

当我将鼠标悬停在其上时，我会通过Chrome在浏览器上看到该URL，但是当我单击它时，它会转到反应路由器路径，而不是转到我想要的href URL。

Screenshot on browser

我尝试了z-index，但是没有用。任何帮助将不胜感激。

解决方法

尝试停止传播，以使click事件不会冒到Link：

import React from 'react';

function ExampleComponent() {
  const stopEvent = (event) => event.stopPropagation();
  wfuElement= document.getElementById("wfu");
  wfuElement.addEventListener("click",stopEvent,false);

  return (
    // your jsx above
  )
}

export default ExampleComponent;

---

替代解决方案

将点击处理程序添加到a元素：

import React from 'react';

function ExampleComponent() {
  const stopEvent = (event) => event.stopPropagation();

  return (
    // removed everything but anchor for brevity
    <a href="click.com" id="wfu" onClick={stopEvent}> Write For Us? </a>
  )
}

export default ExampleComponent;