Question

在我的基于React / Redux的应用程序中，我实现了如下的注销

在我reducers/index.js的{{1}}中，我创建了一个名为combineReducers的应用级缩减器。在那里，我检查了appReducer操作，然后返回LOGOUT。

这一切都很好。我想要做的是，对于undefined操作，我还要清除LOGOUT并重定向到登录页面。请注意，我想重定向本机浏览器方式，而不是使用react-router。如果我做localStorage。首先它被react-router检测到，我看到登录页面有一点然后刷新，这有点奇怪。

有没有办法防止反应路由器在位置变化时收到通知！？

Answer 1

您无法完全阻止它，但您可以通过访问来控制它 history.listen function。

使用React-Router 4，您可以使用HOC withRouter包装顶级组件。

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

这允许访问this.props.history并控制它

  class App extends Component {
  constructor(props) {
    super(props);

    this.props.history.listen((location, action) => {
      //here you can control the location change
    });
  }

  render() {
     return (
         </div>
      );
  }
}

您还在历史记录对象上有 listenBefore 事件，您可以使用此事件来控制导航并添加您自己的自定义导航逻辑：

history.listenBefore( (location, done) => doSomething(location).then(done) )

防止react-router检测到位置变化

1 个答案: