React-Router v5 history.push 不会触发组件

Question

我很抱歉我的朋友再次问这个问题。我为这个问题找到了几个解决方案。但是他们让我很困惑。我只是想问优雅的方式来做到这一点。正如您从标题中了解到的，我有一个关于 React 路由的问题。让我解释。

我有一个按钮，名字是Login. 单击按钮后，我做了一些逻辑，然后我想重定向到另一个视图。

Login.jsx（只是历史部分）

  import { withRouter } from "react-router";
.
.
.
.
  const {history} = this.props;
  if (history) history.push("/home");

.
.
.
.
export default (withRouter(Login));

App.js（限制部分）

import {withRouter} from 'react-router';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
.
.
.
.
.
<div className={'container-fluid'}>
                <Router>

                    <Route path="/login" exact component={Login}/>

                    {(showMe && !pathLogin) &&
                    <Header maximize={maximize}/>
                    }
                    {(showMe && !pathLogin) &&
                    <div className="row h-100">
                        <Sidebar maximize={maximize}/>

                        <Switch>
                            <Route path="/home" exact component={Home}/>
                            <Route path="/somepage" exact component={Somepage}/>
                        </Switch>
                    </div>
                    }
                </Router>
            </div>
.
.
.
.
export default (withRouter(App));

这种结构运行良好。当我运行应用程序时，登录页面出现在第一个状态。然后我单击登录按钮，浏览器路径更改但视图未呈现。如果我在登录后按浏览器刷新按钮。页面渲染正确。下一次之后，直到我单击浏览器上的刷新按钮，一切正常。如果有人给我建议，我将不胜感激。