When route '/creator' is selected and the user clicks on the button (see creator_widget.js.jsx below) he's taken back to '/'. Why and how to prevent this?

creator_widget.js.jsx

var React = require('react');

var CreatorBox = module.exports = React.createClass({
  render: function() {
    return (
      <a href="#" className="btn btn-default" role="button">Button</a>
    )
  }
})

main.js.jsx

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

var MyApp = React.createClass({
  render: function () {
    return (
      <div className="App">
        <ul>
          <li><Link to="/">Index</Link></li>
          <li><Link to="creator">Faulty Button</Link></li>
        </ul>
        <RouteHandler/>
      </div>
    );
  }
});

$(document).on("page:change", function() {
  console.log("hello");
  var routes = (
    <Route handler={MyApp}>
      <Route name="creator" path="/creator" handler={require('./creator_widget.js.jsx')}/>
    </Route>
  );
  Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.getElementById('content'));
  });
});

react-router doesn't seem to like href="#" on anchor tags. This seems to be causing the route change.