Next.js Discord

Discord Forum

Stop propagation on link not working

Answered
Red-legged Kittiwake posted this in #help-forum
Open in Discord
Red-legged KittiwakeOP
I need the page to not redirect when the user clicks the buttons, but do redirect on clicking anywhere else.
I tried e.stopPropagation, but it doesn't seem to work
would be great if someone could take a look
Answered by Double-striped Thick-knee
try this exact same code somewhere, 

<Link href="/create">
    Create
    <div
        onClick={(e) => {
            e.preventDefault()
            // Do other stuffs here
        }}
        className="bg-red-200"
    >
        Won't redirect on click
    </div>
</Link>
View full answer

34 Replies

Red-legged KittiwakeOP
i've tried using a div with onClick={() => router.redirect('/')} instead of a Link but same reuslt
here's what the componenet looks like:
@Double-striped Thick-knee have you tried `preventDefault` function
Red-legged KittiwakeOP
yes i used that too
Double-striped Thick-knee
It should look something like this,
Red-legged KittiwakeOP
hm
could i be not clicing the button?
this doesn't work either
Double-striped Thick-knee
huh, weird
it's working here
Double-striped Thick-knee
try this exact same code somewhere, 

<Link href="/create">
    Create
    <div
        onClick={(e) => {
            e.preventDefault()
            // Do other stuffs here
        }}
        className="bg-red-200"
    >
        Won't redirect on click
    </div>
</Link>
Answer
Red-legged KittiwakeOP
ok
that works
the div doesn't reidriect on click
ok wrapping the icon in a div works now
th
thx
@Red-legged Kittiwake ok wrapping the icon in a div works now
Double-striped Thick-knee
cool
mark your solution
Red-legged KittiwakeOP
but the divs take lots of space
even with h-fit w-fit
for some reason
Double-striped Thick-knee
what are those Icon components
Red-legged KittiwakeOP
like this
icnos:
Double-striped Thick-knee
can you send me this component
Red-legged KittiwakeOP
sure
 <svg
      className="inline-block w-4 h-4 hover:text-green-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M19 15l-7-7-7 7"
      ></path>
    </svg>
upvote ^^^
 downvote: (props: LucideProps) => (
    <svg
      className="inline-block w-4 h-4 hover:text-red-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M5 9l7 7 7-7"
      ></path>
    </svg>
  ),
Double-striped Thick-knee
@Red-legged Kittiwake add class leading-none on div
Red-legged KittiwakeOP
nice that works
thanks!