reactjs - Nested React Router가 레이아웃을 업데이트하지 않습니다

루트 경로가있는 앱 구성 요소 :

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';
class App extends Component {
    render() {
        return (
            <Routes/>
        );
    }
}
export default App;

루트 경로 :

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;

중첩 된 경로가있는 필수 구성 요소 :

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;

예상 경로 :

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;

그래서 문제는 링크를 클릭하면 (예 : /dashboard/notifications ) ) 브라우저의 URL을 변경하지만 레이아웃을 업데이트하지는 않지만 페이지를 새로 고치면 정상적으로 작동하고 적절한 구성 요소가 표시됩니다. 와이즈 비즈  경로와 /  잘 작동합니다.

dashboard