如何解决如何在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。
我尝试了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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。