刷新URL时不会重新加载Route

Question

我正在做我的第一个React项目，进展顺利。当我刷新URL时，组件将不会显示。不会重新加载的组件是我的Home组件，它具有一个Router组件。

从根目录启动时加载的组件：https://imgur.com/a/w4qlpYD 在除根目录https://imgur.com/a/nLfW1gT

以外的任何URL上刷新时加载的组件

我的项目的结构如下： App.tsx（输入）

public render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact={true} path={routes.HOME} component={Home}/>
                    <Route exact={true} path={routes.SIGN_IN} component={SignIn}/>
                </Switch>
            </BrowserRouter>
        );
    }

这些组件可以正确重新加载。

主页组件：

export class HomeComponent extends React.Component {
    public render() {
        return (
            <BrowserRouter>
                <Layout style={{minHeight: '100vh'}}>
                    <Sider breakpoint="lg"
                           collapsedWidth="0"
                           onBreakpoint={broken => {
                               console.log(broken);
                           }}
                           onCollapse={(collapsed, type) => {
                               console.log(collapsed, type);
                           }}
                    >
                    <Menu theme="dark" defaultSelectedKeys={['4']} mode="inline">
                            <Menu.Item key="1">
                                <Icon type="mail"/>
                                Experience
                                <Link to={routes.EXPERIENCE}/>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="book"/>
                                Education
                                <Link to={routes.EDUCATION}/>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="experiment"/>
                                Skills
                                <Link to={routes.SKILLS}/>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <Icon type="user"/>
                                Who am I?
                                <Link to={routes.ABOUT}/>
                            </Menu.Item>
                            <Menu.Item key="5">
                                <Icon type="branches"/>
                                Projects
                                <Link to={routes.PROJECTS}/>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <Icon type="line-chart"/>
                                Stats
                                <Link to={routes.STATS}/>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Content>
                            <Redirect key="" to={"/about"}/>
                            <Route exact={true} path={routes.EXPERIENCE} component={Experience}/>
                            <Route exact={true} path={routes.EDUCATION} component={Education}/>
                            <Route exact={true} path={routes.SKILLS} component={Skills}/>
                            <Route exact={true} path={routes.ABOUT} component={About}/>
                            <Route exact={true} path={routes.PROJECTS} component={Projects}/>
                            <Route exact={true} path={routes.STATS} component={Stats}/>
                        </Content>
                        <Footer><MyFooter/></Footer>
                    </Layout>
                </Layout>
            </BrowserRouter>
        );
    }
}

应该在Home组件中旋转的每个组件都不会正确地重新加载。

我的代码有什么问题？