reactjs event listener beforeunload added but not removed
<p>I have a react component like :</p>

<pre><code>import React, { PropTypes, Component } from 'react'


class MyComponent extends Component {

    componentDidMount() {
       window.addEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", function (event) {
            console.log("hellooww")
            event.returnValue = "Hellooww"
        })
    }

    render() {

        return (
            &lt;div&gt;
                Some content
            &lt;/div&gt;
        )
    }

}

export default MyComponent
</code></pre>

<p>Here event lister is added to the component. When I refresh the page it gives me pop up asking to leave the page. </p>

<p>But when I go to another page and do refresh it again shows the same pop-up.</p>

<p>I am removing the <code>eventListener</code> from the component on <code>componentWillUnmount</code>. Then why it is not being removed?</p>

<p>How can I remove the <code>beforeunload</code> event on other pages?</p>