React 路由器 history.push() 无法从 history.listen() 工作

Question

在我的 React 应用程序中，我使用 react-router-dom 进行路由。我有一个自定义的 history 对象，我将其传递给 Router（不是 BrowserRouter）对象，这样我就可以在历史对象上配置监听处理程序。

import { createBrowserHistory } from 'history';
import auth from './auth';

const history = createBrowserHistory();

history.listen((location) => {
  if(location.pathname !== '/login'){
    if(!auth.getToken()){
      history.push('/login');
    }
  }
});

export default history

这在过去几个月里运行良好，但是，在最近更新我的 node_modules 之后，listen 函数内的推送突然没有导致更新 DOM（但更改了 URL）。

我不知道是什么原因造成的，我使用 history.push 作为导航整个应用程序其余部分的唯一方式，它仍在运行，所以我不知道为什么不适用于此文件。

即使在不属于我的 React 组件树的其他 .js 文件中导入历史对象，也可以调用 history.push 并更新它。

感谢任何帮助！

编辑：我的 react-router-dom 包版本是 ^4.4.0-alpha.0，React 16.4.0

Answer 1

感谢托勒的回答：

我的问题已通过将每个 history.push() 替换为 setTimeout(() => history.push(), 0);

得到解决

React 路由器 history.push() 无法从 history.listen() 工作

React router history.push() not working from history.listen()

javascript

reactjs

react-router-dom