React Router does not update View - reactjs

Question

I am beginning to work with React and I have an issue understanding how to make react-router work.
In my project, I created an App.js file that exports a simple render function:
export default class App extends React.Component {
render () {
return <Router>
<div>
<Link to="/connected">Login</Link>
<Link to="/">Home</Link>
<Route path="/connected" component={Connected}/>
<Route exact path="/" component={LoginPage}/>
</div>
</Router>
}
}
Of course, on the top of the file, I import two components: Connected and LoginPage and a bunch of other components:
import React from 'react'
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom'
import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'
My components are quite simple:
import React from 'react'
export default class LoginPage extends React.Component {
render () {
return <div>
Hello World 1
</div>
}
}
And pretty much the same for the second component.
My problem is:
When I click on a <Link to="/">Home</Link>, the page is not updated with the LoginPage component. But if I refresh the page, the LoginPage components appears. If I click on <Link to="/connected">Login</Link>, the router does not update the page and I also need to refresh completely the page to display the right component.
What am I doing wrong? What other informations would you need to help me resolve my problem?

Answer 1

Copy this into 'Package.json' > 'dependencies': "react-router": "^2.4.0",
Then do npm install
Once done this:
Try this:
First Component (Routes, it is App.jsx) (Maybe you need to change routes of imports)
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, Redirect } from 'react-router';
import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={LoginPage}/>
<Route path="/connected" component={Connected}/>
</Router>
, document.getElementById('root')
);
Second component (Home):
import React from 'react';
import { Link } from 'react-router';
export default class Home extends React.Component {
render() {
return(
<div>
<h1> This is HomePage </h1>
<h3> Click to go HomePage </h3>
<Link to="/">Home</Link>
<h3> Click to go Connected </h3>
<Link to="/connected">Connected</Link>
</div>
)
}
}
Third component (Connected):
import React from 'react';
import { Link } from 'react-router';
export default class Connected extends React.Component {
render() {
return(
<div>
<h1> This is ConnectedPage </h1>
<h3> Click to go HomePage </h3>
<Link to="/">Home</Link>
<h3> Click to go Connected </h3>
<Link to="/connected">Connected</Link>
</div>
)
}
}