Odtnhj

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.

Try to use NavLink tag instead of Link and BrowserRouter instead of Router , import it from "react-router-dom"