NextJS button inside Link component-CodePudding

I wonder how is possible to have button inside NextJS Link component? When you wrap the button by and click the button, then it run onClick event and after it redirect to value in href attribute.

How can you just run onClick button event and stop redirecting?

<Link href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}>
  <div className="responsive-table__row">
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
    <div className="responsive-table__item">
      <button className="responsive-table__button button button--secondary" onClick={() => handleModalOpenerClick(field)}>Show modal</button>
    </div>
  </div>
</Link>

CodePudding user response：

Change your onClick handler to this:

onClick={(e) => {
   e.preventDefault();
   e.stopPropagation();
   handleModalOpenerClick(field);
}}

and it should work.