Как решить эту проблему с помощью вложенных маршрутов в реагировании (администраторская раскладка)?

Question

У меня проблема с маршрутизацией в моем приложении реакции.У меня есть компонент HOC под названием «ProtectedRoute», который должен показать мою боковую панель (там я отображаю {this.props.children}) + указанный маршрут, но когда я хочу перейти в / home / profile, меня всегда перенаправляют в / home /приборная доска.Можете ли вы взглянуть на мой код и предложить решение?Спасибо

import React from 'react';
import Login from '../pages/Login/Login';
import ProtectedRoute from '../components/shared/ProtectedRoute';
import history from '../history';
import AdminLayout from '../layouts/AdminLayout';

const router = (
    <Router history={history}>
        <Switch>
            <Route path="/" exact component={Login} />
            <ProtectedRoute path="/home" component={AdminLayout} />
            <Route render={() => (<div>Sorry. This page does not exist.</div>)} />
        </Switch>
    </Router>
);

export default router;

import { Route } from 'react-router-dom';

import Sidebar from '../components/Sidebar/Sidebar';
import Dashboard from '../pages/Dashboard/Dashboard'
import EmployeeProfile from '../pages/EmployeeProfile/EmployeeProfile';
import { Switch } from 'react-router-dom';

class AdminLayout extends Component {
    render() {
        return (
            <React.Fragment>
                <Sidebar>
                    <Switch>
                        <Route path="/home/dashboard" exact component={Dashboard} />
                        <Route path="/home/profile" component={EmployeeProfile} />
                        <Route render={() => (<div>Sorry. This page does not exist.</div>)} />
                    </Switch>
                </Sidebar>
            </React.Fragment>
        );
    }
}

export default AdminLayout;