Dropdowns are not working with React-Router

Question

I'm using React-Router and MaterializeCSS and seems that every hash link (href= "#") inside a navbar is being mapping in a route to a page that doesn't exist, but what I want is just to open the dropdown.

How can I avoid this behavior? It just works if I refresh the page.

My routes:

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var HashHistory = ReactRouter.hashHistory;
var Login = require('../containers/loginContainer');
var Base = require('../containers/shared/baseContainer');
var Dashboard = require('../components/dashboard');


var Routes = (
  <Router history={HashHistory}>
      <Route path='/' component={Login}/>
      <Route component={Base}>
          <Route path='/Dashboard' component={Dashboard}>
          </Route>
      </Route>
   </Router>
)

module.exports = Routes;

My navbar (that is inside Base component):

<ul id="dropdown1" className="dropdown-content">
 <li><a href="#!">Cadastrar</a></li>
 <li><a href="#!">Listar</a></li>
</ul>
<nav>
  <div className="nav-wrapper">
    <Link to="/" className="brand-logo">Logo</Link>
    <ul className="right hide-on-med-and-down">
      <li><a className="dropdown-button" href="#!" data-activates="dropdown1">Funcionários<i className="material-icons right">arrow_drop_down</i></a></li>
     </ul>
  </div>
</nav>