Is there a way to make the parent Link exclude some child elements?

Question

So I have a Link on each row of my list which opens up a flyout. Within that there is copy button and another button. Both of these buttons are within their own divs. How do I get the Link to be disabled on those two buttons?

I've tried using pointer-events: none, overlay and z-index but none of them have worked.

EDIT: Ok so I just realised I should add more info on this. So the <CopyButton/>'s works when I used both stopPropagation and preventDefault but it doesn't work with <Button2 />. It also messes up the pagination.

<Link to={`/whatever?id=abcme`} onClick={() => loadFlyout()}>
  <div>
    // Second column
  </div>

  <div>
    // Third column
  </div>

  <div className={styles.id}>
    <span>Text</span>
    <span>
        <CopyButton/> 
    </span>
  </div>

  <div>
    // Fifth column
  </div>

  <div>
      <Button2/>
  </div>
</Link>

Clicking on <Button2 /> and <CopyButton /> both do their individual onClick events but also brings up the flyout.

Not really sure if what I'm trying to do is possible or not and if any help would be much appreciated!

Answer 1

In your click handler you have to do event prevent default or stop propagation depends on how you want the event to react:

onClick(e) A custom handler for the click event. Works just like a handler on an tag - calling e.preventDefault() will prevent the transition from firing, while e.stopPropagation() will prevent the event from bubbling.

https://knowbody.github.io/react-router-docs/api/Link.html