React router displays component only on refresh - reactjs

Question

I want to create a simple react router example and have added my code below. The components gets displayed on refresh but the links doesn't seem to work. I have kept my links in 'Header.js' file and the components inside a folder called 'functional'. Can someone help me with this, am new to this and appreciate all the help.
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
import Container1 from './container/container1';
import Header from './container/header';
import history from './utils/history';
import { Router, Route, Switch } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path = "/" component={Container1} />
<Route path="/component1" render={() => <Component1/>} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Switch>
</div>
</Router>
</div>
);
}
}
export default Routes;
header.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Header extends Component {
render () {
return (
<div>
<Link to='/' style={{padding: '5px'}}>
Home
</Link>
<Link to='/component1' style={{padding: '5px'}}>
component1
</Link>
<Link to='/component2' style={{padding: '5px'}}>
component2
</Link>
<Link to='/component3'style={{padding: '5px'}}>
component3
</Link>
</div>
);
}
}
export default Header;
App.js
import React from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<div>
<Routes />
</div>
);
}
export default App;

Answer 1

In your routes.js, try to change following:
From:
import { Router, Route, Switch } from 'react-router';
To:
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";