React-Router - 鏈接到同一頁面不觸發頁面unMount

我使用react-router Link瀏覽我的SPA應用程序。React-Router - 鏈接到同一頁面不觸發頁面unMount

在某些情況下，我得到的情況時，有從頁面完全相同的頁面的鏈接使用相同的參數，例如：

我在../page1/2和我有一個鏈接到相同的路線：

<Link to='/page1/2'> 
    click me 
</Link>

我的問題是，在這種情況下componentWillUnmount和componentDidMount不開火，只有componentDidUpdate。

這是有問題的，因爲我需要在componentWillUnmount做一些清潔。

解決方案是什麼？

來源

2017-02-20 omriman12

這裏有兩個很好的答案，但從語義上來說，我認爲你應該接受@damianfabian的答案。如果您必須根據鏈接確定的條件重新呈現組件，則添加onClick會更好，但對於您的情況，似乎您希望始終重新呈現它。同樣，它們都是正確的，但'componentWillReceiveProps'在語義上更合適。 –

您必須檢查componentWillReceiveProps以處理此更改，react-router標識組件處於活動狀態，並且不卸載組件，只傳遞新屬性。

componentWillReceiveProps (nextProps) { 
    if(nextProps.id === this.props.id) { 
    // Clean component and reload? 
    } 
}

來源

2017-02-20 12:32:45 damianfabian

這個工作，用這個解決方案還有一些問題，但是thx – omriman12

react-router像其他任何組件一樣工作 - 它觸發狀態的變化。如果狀態發生變化，react的調節過程將會找出哪些組件（在您的情況下，路線）需要重新渲染。

就你而言，頁面將完全相同，這將使React認爲沒有發生變化。因此，該組件將永遠不會重新渲染，也永遠不會卸載。

最簡單的解決方案是將onClick處理程序添加到爲您進行清理的<Link />。這樣的事情：

handleCleanup(e) { 
    if (window.location.href === e.target.href) { 
    // do your cleanup like you do in componentWillUnmount 
    } 
} 
render() { 
    return <Link onClick={this.handleCleanup.bind(this)} to={`/page/1/${this.state.someProp}` /> 
}

來源

2017-02-20 12:33:57

當你只改變PARAMS和相同的處理程序呈現，處理程序將不會重新裝入;它只會被更新，就像React中的小孩不會通過改變他們的道具（除了鑰匙）重新裝上。所以你不會得到componentDidMount，但是componentWillReceiveProps。

componentWillReceiveProps (nextProps) { 
    // do whatever clean up you need before rerendering 
    // goo practise checking somehow that you are in the desired situation 
}

無論如何，我建議你去看看的React Component lifecycle這是非常重要的，如果你正在學習這個框架。

來源

2017-02-20 12:37:27 rakwaht

React-Router - 鏈接到同一頁面不觸發頁面unMount

回答

相關問題