history.push 在单击按钮之前无法等待或同步答案

【问题标题】：history.push not working in wait or sync until button clickhistory.push 在单击按钮之前无法等待或同步
【发布时间】：2020-01-28 22:54:44
【问题描述】：

我尝试使用“history.push()”在不刷新的情况下导航页面它只有在人类通过按钮单击时才有效。它不会以编程方式工作。它只是更新 url 而不是在浏览器中导航。

//Index.js
ReactDOM.render(<Router history={history}><App /></Router>, document.getElementById('root'));

//App.js
      <Switch>
          <Route path="/" exact strict component={Login}/>
          <Route  path="/Homepage" exact strict component={Homepage}/>
      </Switch>

//History.js
import {createBrowserHistory} from 'history'
export default createBrowserHistory();

工作正常，直接使用按钮点击时。

//Working
  function btnClick(){ 
      history.push('/Homepage');
      }

不工作，当它处于同步或等待功能时。

//Not Working
  const wait=ms=>new Promise(resolve => setTimeout(resolve, ms)); 
     wait(4*1000).then(() => { 
      history.push('/Homepage');
      });

【问题讨论】：

标签： node.js reactjs react-router

【解决方案1】：

您没有正确设置路由器上的历史记录

<Router history={history} />

【讨论】：

@TahaFarooqui 我想你当时使用的是BrowserRouter，而不是普通的Router？如果您想使用自定义历史记录，则需要将它们切换出去。
我正在使用这个 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
@TahaFarooqui 是的，所以不要导入 BrowserRouter，只需导入 Router。此外，FWIW 你没有必须创建你自己的历史来利用history.push，如果你希望将浏览器历史与你的状态管理同步，这通常是使用的方法（例如 Redux / Mobx等）。
我应该使用 react-router-dom 中的 useHistory 吗？
@TahaFarooqui，useHistory 可能值得一看...reacttraining.com/react-router/web/api/Hooks/usehistory 这是作者写的关于它的讨论...reacttraining.com/blog/react-router-v5-1 > 注意：useHistory 钩子很快我们正在研究的未来钩子的权宜之计：useNavigate。 ...{snipped}... 我们现在提供 useHistory 以尽可能轻松地迁移使用历史 API 的现有代码。