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

Question

I have a href tag inside a Link tag from react-router-dom. The Link works fine in my React.js app. I am trying to access the href tag which sits inside the Link tag, but when I do click I am redirected to the route path specified in my app Link instead of the 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>

I am trying to access the href tag that has the id="wfu".

When I hover over it, I see the URL on the browser through Chrome but when I click it, instead of going to the href URL which is what I want, it goes to react-router path.

Screenshot on browser

I tried the z-index but that did not work. Any help would be highly appreciated.

Answer 1

Try to stop the propagation so the click event doesn't bubble up to the 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;

---

Alternative Solution

Add a click handler to the a element:

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;