如何在React（管理员布局）中使用嵌套路由解决此问题？

Question

我在我的React应用程序中路由存在问题。我有一个名为“ ProtectedRoute”的HOC组件，该组件应显示我的侧边栏（我渲染了{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;