2017-09-23 139 views
2

我使用React + Redux創建了SPA,其中使用了react-route。 我面臨的一個問題是,每當我切換像/ about,/ contact,/ list時,我的路線。每次組件卸載React路由器組件在路由更改時卸載

所以,我需要知道這是一種預期的行爲,或者我做錯了什麼。因爲在某個組件中,我正在調用ajax來獲取數據,如果組件被卸載並且用戶又回來了......即使數據已經存在,它也會再次發出ajax調用。

<Route path="/" component={App}> 
    <IndexRoute component={HomePage} /> 
    <Route path="about" component={About} /> 
    <Route path="/" component={HomePage} /> 
</Route> 
+1

「這是一個預期的行爲」。是。如果更改路由,則當前路由組件將卸載並掛載新路由組件。 –

+0

有什麼辦法可以制止這一點。其實我不需要每次卸載組件。由於不必要的ajax命中。 也是這種正確的方法來停止卸載組件? –

回答

0

每次你瀏覽到舊的組件被移除的路線時,新的組件被加載並獲取與存儲值填充(與終極版的連接)。

數據將始終在商店中可用,因此您不需要在組件卸載並重新加載時啓動新的Ajax請求。

而且,如果您仍然希望組件始終可用,那麼您可以使用單個路徑並使用導航菜單或選項卡顯示和隱藏主組件的組件。但取決於組件的數量, DOM可能會相當沉重。

+0

我完全同意你所說的,但我的問題是我正在使ajax(從componentWillMount或componentDidMount)調用從組件自己獲取數據,並且如果一個組件將被卸載並重新安裝,它的生命週期方法將被解僱。 –

+0

您可以將其保留在componentDidMount中,但添加一個條件以便不派遣loadAll操作,前提是數據已經加載完畢。所以它只會在組件第一次安裝時加載 –