Button onClick not executing the triggerThis function because it is wrapped with react-router-dom Link component
Expected behaviour: Card click should navigate to /app/url and on button click the url navigation should be prevented and should run triggerThis function.
I want onClick button prevent navigation. but when i click outside button the navigation should work .. triggerThis is a function that just console.log("hello")
<Card>
<Link to={`/app/url`}>
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={triggerThis}></button>
</Link>
</Card>
You really shouldn't place interactive elements within other interactive elements, but if you want to allow the button to be independently clickable and not trigger the navigation of the wrapping Link component then you should stop the click event propagation. This prevents the click event from propagating further up the DOMtree to the Link element, thus preventing the navigation action from occurring.
Example:
const clickHandler = e => {
e.stopPropagation();
...
};
...
<Card>
<Link to="/app/url">
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={clickHandler}>
...
</button>
</Link>
</Card>