在路由器和交换机之间添加新组件后，React Router Route显示页面未呈现

Question

我为我的项目用ReactRouter实现了Route，但是在Switch组件中添加了另一个父级却破坏了每条路线的重定向。

问题的根源是Wrapper组件。在Router的其余部分上添加此组件时，我根本无法访问这些页面。链接会更改，但是页面本身不会重新呈现。但是，当我删除Wrapper并与该组件返回的div进行交换时，一切都会按预期进行。

这是错误的Router实现。

<HashRouter>
    <Wrapper> {* this fails *}
        <Menu/>
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/view-project/:id" component={Project} />
            <Route exact path="/create-pr" component={PRSetup}/>
            <Route exact path="/create-ticket" component={TicketSetup}/>
            <Route exact path="/create-cmp" component={CmpSetup}/>
            <Route exact path="/create-project" component={ProjectSetup}/>

            <Route exact path="/edit-component/:id" component={EditComponent}/>
            <Route exact path="/edit-ticket/:id" component={EditTicket}/>
        </Switch>
    </Wrapper> {* this fails *}
</HashRouter>

这是一个有效的版本

<HashRouter>
    <div class={"container-fluid px-0 knbn-bg-transparent knbn-transition"}>
        <Menu/>
        <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/view-project/:id" component={Project} />
            <Route exact path="/create-pr" component={PRSetup}/>
            <Route exact path="/create-ticket" component={TicketSetup}/>
            <Route exact path="/create-cmp" component={CmpSetup}/>
            <Route exact path="/create-project" component={ProjectSetup}/>

            <Route exact path="/edit-component/:id" component={EditComponent}/>
            <Route exact path="/edit-ticket/:id" component={EditTicket}/>
        </Switch>
    </div>
</HashRouter>

这是Wrapper的实现

import React from 'react';

const Wrapper = (props) => {
    return (
        <div class={"container-fluid px-0 knbn-bg-transparent knbn-transition" + (props.themeToggled ? " knbn-dark-bg-1x" : " knbn-snow-bg-1x")}>
            {props.children}
        </div>
    );
}

export default Wrapper;

我希望这两种情况下的路由都不会出现问题。