CODEWITHSUNDEEP
javascripthtmlreactjsjsxreact-router-dom
ram
ram

Reputation: 690

How do I prevent event bubbling with react-router-dom's <Link>?

Okay. So I have something like this.

I added the Link around the whole post thinking I could just stop the bubbling for the individual buttons, but stopPropagation() is not working as expected.

I have split the button actions into a separate component, which was suggested by another post on the subject but that didn't do the trick. I'm assuming this has something to do with the fact that the it's a react-router-dom Link, but it could be something else.

Any ideas? 

import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = ({
  doSomething
})=>(
  <Link to={`/some/url`}>
  <div className="post">
    <span className="button" onClick={e=>{
      e.stopPropagation();
      doSomething();
    }}>My Button</span>
  </div>
  </Link>
)

Upvotes: 2

Views: 1591

Answers (1)

user2541867
user2541867

Reputation: 444

should work:

e.preventDefault()

more detailed explanation: stopPropagation/preventDefault behavior on an element inside a link

Also, stopPropagation is a function, and it's waiting to be called.

Upvotes: 1

Related Questions