React-router having trouble display each of the components on its own - reactjs

Question

I'm migrating to ReactRouter v4 and it's just been proving a hassle to me. I have a file in app.js in which i'm trying to setup a simple routing system.
import React, { Component } from 'react';
import { Router, Route, IndexRoute, hashHistory, Redirect } from 'react-router';
import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';
class App extends Component {
render() {
return (
<Router history={history}>
<Route exact path='/' component={NavigationBar}></Route>
<Route exact path='/login' component={LoginPage}></Route>
</Router>
);
}
}
The code compiles perfectly well, but for some reason on the browser, the navigation bar is shown instead of the login page when the url is localhost:3000/login
The image of the nagivation bar showing instead of the login
I intended the login to be shown at /login and the navigation bar to be shown at /, but instead the navigation bar is shown at both /login and /.
I've been following the examples on the react-router training guide here, and I can't seem to figure out what I'm doing wrong.

Answer 1

Maybe it's just a typo in your post here, but you're extending Compoent instead of Component. I would guess you'd see worse issues than getting the wrong component if that was happening in your code.
I prefer BrowserRouter (I don't have to support legacy browsers), but I got your code working like this:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { HashRouter as Router } from 'react-router-dom';
import LoginPage from './LoginPage';
import NavigationBar from './NavigationBar';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path='/' component={NavigationBar}></Route>
<Route exact path='/login' component={LoginPage}></Route>
</div>
</Router>
);
}
}
You'll have to install react-router-dom for this code to run.
Visiting http://localhost:3000/#/login, I get the Login component. If you change HashRouter to BrowserRouter, you can see your component render at http://localhost:3000/login.