React-Router：在导航到其他路由之前将逻辑应用于组件

Question

在导航到其他路线之前，是否可以对组件应用逻辑？

例如，我的组件看起来像这样：

  class Example extends React.Component {

    //Handles logic for when user leaves page
    handlePageExit = () => {
        console.log("Leaving page...");
    }

    //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
    componentDidMount = () => {
        window.addEventListener("onbeforeunload", this.handlePageExit);
    }

    //This hook is called when page exits or is refreshed 
    //It will remove event listener when 
    //However, it wont be called when user changes to a new route
    componentWillMount = () => {
        window.removeEventListener("onbeforeunload", this.handlePageExit)
    }

    //There's no react life cycle hook I can use to call HandlePageLogic when user navigates to a new route to remove event listener or apply other logic...

    render(){
        return(
          <div /> //Not relevant to question
        )
    }
}

我正在尝试应用逻辑，例如在页面导航到新路线之前删除事件侦听器。

我一直在使用的生命周期方法，如试过componentWillReceiveProps，componentWillUnmount和componentShouldUpdate插入逻辑之前该组件是卸载但他们似乎并不导航到新页面时被调用。

有谁知道我可以在react-router v4的路由更改之间的什么地方或如何插入逻辑？

谢谢。

Answer 1

是的。您需要向您的路由器历史对象添加更改侦听器。

为此，请添加具有历史记录属性的componentDidMount：

componentDidMount() {
    this.props.history.listen(this.onRouteChange.bind(this));
  }

onRouteChange(route) {
//route.pathname = Your next route

//Handle what you need to do here
//if you need to redirect you can do this
     this.props.history.replace({pathname: '/desiredRoute'});
  }