For some reason my onClick handlers are adding an empty query param to my url when I click them. I was able to fix the issue by adding event.preventDefault to my event handlers but I would like to better understand what actually happened and if this was the correct solution. For context the code below is a simple component to test out some OAuth 2 functionality. The onClick handlers just trigger a reflux action. You'll see I've added e.preventDefault() to all of them. Without that fix, anytime I trigger one of those functions my url will change from http://localhost:3000/#/signIn to http://localhost:3000/?#/signIn . I am also using react-router.
// dependencies -------------------------------------------------------
import React from 'react';
import hello from '../../libs/hello';
import Actions from '../../actions/Actions';
import UserStore from '../../stores/userStore';
var Signin = React.createClass({
// life cycle events --------------------------------------------------
componentDidMount: function () {
},
render: function () {
return (
<form>
<h2>Sign in with Google</h2>
<button className="btn btn-primary" onClick={this._signIn} >
<i className="fa fa-google" />
<span> Google</span>
</button>
<button className="btn btn-info" onClick={this._logToken} >Log Token</button>
<button className="btn btn-warning" onClick={this._signOut}>Sign Out</button>
</form>
);
},
// custom methods -----------------------------------------------------
_signIn: function (e) {
e.preventDefault();
Actions.signIn();
},
_signOut: function (e) {
e.preventDefault();
Actions.signOut();
},
_logToken: function (e) {
// e.preventDefault();
Actions.logToken();
}
});
export default Signin;
