El botón onClick no ejecuta la función triggerThis porque está envuelto con el componente de enlace react-router-dom
Comportamiento esperado: al hacer clic en la tarjeta, se debe navegar a /app/url y al hacer clic en el botón, se debe evitar la navegación por URL y se debe ejecutar la función triggerThis .
Quiero que el botón onClick impida la navegación. pero cuando hago clic en el botón exterior, la navegación debería funcionar.
<Card> <Link to={`/app/url`}> <h1>Title</h1> <p>Paragraph</p> <button onClick={triggerThis}></button> </Link> </Card>Realmente no debe colocar elementos interactivos dentro de otros elementos interactivos, pero si desea permitir que se pueda hacer clic en el button de forma independiente y no desencadenar la navegación del componente Link envolvente, debe detener la propagación del evento de clic. Esto evita que el evento de clic se propague más arriba en el DOMtree hasta el elemento Link , evitando así que ocurra la acción de navegación.
Ejemplo:
const clickHandler = e => { e.stopPropagation(); ... };...
<Card> <Link to="/app/url"> <h1>Title</h1> <p>Paragraph</p> <button onClick={clickHandler}> ... </button> </Link> </Card>