How to prioritize a link button in a link div in React JS-CodePudding

I am making a site and I am having some troubles with a button, it's inside a link div but when I Click the button, insted it takes me to the button link it takes me to the div link.

 import { Link } from "react-router-dom";

 <Link to={'/seminovos/'  carItem.name}> 
   <div className="carItem">
    <div className="carBackground"> <img src={image} alt=''/> </div>
    <h1 className="carName"> {name} </h1>
    <p> {year} - {km}</p>
    <p className="carPrice"> ${price} </p> 
    <a className="consultarA" href="https://web.whatsapp.com/send?phone=**********" 
    target="_blank">
     <button className="contato"> Conversar com Vendedor </button>
    </a></div>
  </Link>

How can i make this button works ?

CodePudding user response：

You can use event.stopPropagation() to do that