ReactJs瀏覽器後退按鈕

Question

我正在使用Reactjs.I當他點擊後退按鈕時要警告用戶。 我所母鹿是

handleWindowClose = (ev) => { 
    ev.preventDefault(); 
    return ev.returnValue = 'Leaving this page will loose data'; 
} 

componentDidMount =() => { 
    window.addEventListener('beforeunload',this.handleWindowClose);  
} 

componentWillUnmount =() => { 
    window.removeEventListener('beforeunload',this.handleWindowClose); 
} 

但是這並不後退按鈕click.So我試着這樣做

handleWindowClose = (ev) => { 
     ev.preventDefault(); 
     return ev.returnValue = 'Leaving this page will loose data';   
} 

onBackButtonEvent = (e) => { 
    e.preventDefault(); 
    if(confirm("Do you want to loose this data")){ 
    window.history.go(0); 
    }else { 
    window.history.forward(); 
    } 
} 

componentDidMount =() => { 
    window.addEventListener('beforeunload',this.handleWindowClose);  
    window.addEventListener('popstate',this.onBackButtonEvent); 
} 

componentWillUnmount =() => { 
    window.removeEventListener('beforeunload',this.handleWindowClose); 
    window.removeEventListener('popstate',this.onBackButtonEvent); 
} 

我沒有使用react-router.Is有沒有更好的方式做工作這隻使用react.Also我希望窗口留在該頁面上，而不使用history.forward（），因爲我將失去窗口狀態。

Answer 1

編輯

看起來onbeforeunload是你想要什麼：檢查這related question，其中包含一個useful demo。

另外the MDN docs包含一個有用的例子。

---

假設你已經有了一些很好的理由不想使用react-router，我就勾勒這樣

它看起來像你捕獲了錯誤事件的JavaScript的方式。你想抓取URL散列的任何改變，所以你應該使用onhashchange。從文檔

例子：

if ("onhashchange" in window) { 
    alert("The browser supports the hashchange event!"); 
} 

function locationHashChanged() { 
    if (location.hash === "#somecoolfeature") { 
     somecoolfeature(); 
    } 
} 

window.onhashchange = locationHashChanged; 

不過，我給react-router一去，因爲你正在開發中的反應。在這種情況下，browserHistory將成爲你的朋友。