react route using browserhistory changes url but nothing happens

I'm trying to get a react router to work. This is my code:

var hashHistory = require('react-router-dom').hashHistory;
var BrowserRouter = require('react-router-dom').BrowserRouter;
var Route = require('react-router-dom').Route;
var ReactDOM = require('react-dom');
var React = require('react');
var Index = require('./index');
var Login = require('./login');

ReactDOM.render(
    <BrowserRouter history={hashHistory}>
        <div>
            <Route path="/" component={Index} />
            <Route path="/login" component={Login} />
         </div>
    </BrowserRouter>,
    document.getElementById('main-content')
);

and then later in my index.js i do this:

 <div className="navbar-nav" onClick={() => this.props.history.push('/login')}>
                    Log in
                </div>

This makes the url change to /login but it doesn't render the login file. What is wrong?