React-router renders component when I update the browser - reactjs

Question

I am working with react-router and react-md. My problem is that when I change url through links the components not renders. If I press F5 works. My code is this:
Verions
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0"
App.js
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
sidebarVisible: false
};
}
render() {
const { sidebarVisible } = this.state;
return (
<div>
<Header showDrawer={this.showDrawer} />
<Sidebar handleVisibility={this.handleVisibility} closeDrawer={this.closeDrawer} sidebarVisible={sidebarVisible} />
<Content />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
WebFontLoader.load({
google: {
families: ['Roboto:300,400,500,700', 'Material Icons'],
},
});
render(
<Router>
<App />
</Router>
, document.getElementById('root'));
serviceWorker.unregister();
content.js
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Content extends Component {
render() {
const { title } = this.props;
return (
<Router>
<div>
<Route exact path="/client" component={Client} />
<Route path="/payment" component={Payment} />
<Route path="/invoice" component={Invoice} />
</div>
</Router>
);
}
}
export default Content
NavItemLink.js
import React from 'react';
import { Link, Route } from 'react-router-dom';
const NavItemLink = ({ label, to, icon, exact }) => (
<Route path={to} exact={exact}>
{({ match }) => {
let leftIcon;
if (icon) {
leftIcon = <FontIcon>{icon}</FontIcon>;
}
return (
<ListItem
component={Link}
active={!!match}
to={to}
primaryText={label}
leftIcon={leftIcon}
/>
);
}}
</Route>
);
export default NavItemLink;
I think that in the content.js, react-router must detect the change and to renders the components.