Nested React Router doesn't update layout

App component with Root routes:

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {

    render() {
        return (
            <Routes/>
        );
    }
}

export default App;

Root routes:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Login from './scenes/Login/Login';
import Dashboard from './scenes/Dashboard/Dashboard';

const Routes = () => (
    <Router>
        <Switch>
        <Route exact path="/" component={Login} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    </Router>
);

export default Routes;

Nested component with nested routes:

import React, { Component } from 'react';
import logo from '../../logo.png';
import './Dashboard.css';
import Routes from './routes';
import { Link, withRouter } from 'react-router-dom';

class Dashboard extends Component {

    render() {        

        return (
            <div className="App">
                <div id="map" />
                <div className='sidebar'>
                    <img src={logo} className="App-logo" alt="logo" />
                    <Link to={{ pathname: `/dashboard/profile` }}>
                        <i class="icon blue fa fa-2x fa-user mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>
                    <Link to={{ pathname: `/dashboard/home` }}>
                        <i class="icon blue fa fa-2x fa-home mr-3 float-right"></i>
                    </Link>
                    <Routes />


                </div>
            </div>
        );
    }
}

export default Dashboard;

Nested routes:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Notifications from './scenes/Notifications/Notifications';
import Home from './scenes/Home/Home';
import Profile from './scenes/Profile/Profile';

const Routes = () => (
    <Router>
        <Switch>
            <Route path="/dashboard/home" component={Home} />
            <Route path="/dashboard/profile" component={Profile} />
            <Route path="/dashboard/notifications" component={Notifications} />
        </Switch>
    </Router>
);

export default Routes;

So the problem is that when I click the Link ex.(/dashboard/notifications) it changes the url in the browser but doesn't update the layout but when I refresh the page it works fine and the proper components are visible. The / route and dashboard works fine.