Next.js Discord

Discord Forum

Clickable element inside Link component

Answered
Romanian Mioritic Shepherd Dog posted this in #help-forum
Open in Discord
Romanian Mioritic Shepherd DogOP
Is there a way to make an element inside a Link component clickable without triggering the Link component?
Like having a clickable a tag which makes a router push to another page?
Usecase:
I have a Project card and i want to go to the project if I click on it. In that card is the name of the Project Manager.
If i click on the Project Manager I want to go to his profile. I tried using e.stopPropagation onClick but it did not work.
Answered by Ray
<Link href="/project">
  Project
  <button
    onClick={(e) => {
      e.preventDefault();
      console.log("on click");
    }}
  >
    Name
  </button>
</Link>
View full answer

3 Replies

Ray
<Link href="/project">
  Project
  <button
    onClick={(e) => {
      e.preventDefault();
      console.log("on click");
    }}
  >
    Name
  </button>
</Link>
Answer
Romanian Mioritic Shepherd DogOP
@Ray oh, yes, it works. thanks