title: React-Router: Apply logic to component before navigating to a different route
body: <p>Is it possible to apply logic to a component before navigating to a different route?</p>
  
  <p>For example, my component looks something like this:</p>
  
  <pre><code>  class Example extends React.Component {
  
      //Handles logic for when user leaves page
      handlePageExit = () =&gt; {
          console.log("Leaving page...");
      }
  
      //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
      componentDidMount = () =&gt; {
          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 = () =&gt; {
          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(
            &lt;div /&gt; //Not relevant to question
          )
      }
  }
  </code></pre>
  
  <p>I'm trying to apply logic such as removing event listeners before the page is navigated to the new route.  </p>
  
  <p>I've tried using life cycle methods such as <code>componentWillReceiveProps</code>, <code>componentWillUnmount</code>, and <code>componentShouldUpdate</code> to insert logic before the component is unmounted however they don't seem to be invoked when navigating to a new page. </p>
  
  <p>Does anyone know where or how I can insert logic in between a route change in react-router v4?</p>
  
  <p>Thank you.</p>