Im using meteor with react, and i have some links in a component.
im using an event on a link for the click onClick={this.props.onClicked} or onClick={this.onClicked} and on that method I have preventDefault(). But why is clicking on links doing hard reloads on the page?
I suspect (haven’t tried) that since you’ve also set href, you might have to return false in the onClick handler function if you don’t want the url to be opened.
Just wanted to chime in to say that I’m having this same problem. I’m using the react package with Meteor as described in the official tutorial. Whenever I click on a link in my application, the browser navigates to the link and then triggers the onClick event handler (which has evt.preventDefault()). The handler seems to be called too late.
Heading out right now, but I’ll come back to this. I’m beginning to think that it could be an issue with the router that I’m using (FlowRouter) rather than a core Meteor+React issue (@narven, are you also using FlowRouter or some other router?). preventDefault works fine in my Meteor+React apps that don’t use FlowRouter. On a very quick glance, FlowRouter seems to use page.js, which (on a another very quick glance at its source) seems to add a click handler to the DOM that may be intervening and doing things to the route before my own click handler kicks in.
As I said, though, I’ll have to look into this more seriously when I get back.
Yep, in my case, the problem is definitely FlowRouter and/or page.js (a FlowRouter dependency). The page.js click handler captures the click first and ultimately makes the browser proceed to the target of the clicked link, and all of this happens before the React onClick click handler even gets a chance to preventDefault.