防止反应路由器检测到位置变化

Question

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

在reducers/index.js ，我结合了combineReducers ，我创建了一个名为appReducer的应用程序级减速器。 我在那里检查LOGOUT操作，然后返回undefined 。

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

有没有一种方法可以防止在位置更改时通知反应路由器！

Answer 1

您不能完全阻止它，但是可以通过访问history.listen函数来控制它。

使用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) )