什麼是在React組件中執行重定向的適當生命週期階段？

我想渲染一個基於外部條件的組件，否則在應用程序的其他地方重定向。什麼是在React組件中執行重定向的適當生命週期階段？

理論上講，該重定向將組件之前決定，但在某些情況下，我覺得我需要做到這一點的組件。例如，在ReactRouter，路由器可能是這樣的：

<Router> 
    <Route path='/' component={LoadingPage} /> 
    <Route path='/Home' component={HomePage} /> 
    <Route path='/Login' component={LoginPage} /> 
</Router>

，爲LoadingPage邏輯/ sudocode會是這樣的：

if (stillLoading) { 
    render 
} else if (loggedIn) { 
    redirectToHome 
} else { 
    redirectToLogin 
}

它變得複雜，因爲有時應用程序是在請求組件之前已經加載。

什麼生命週期階段是放置此重定向邏輯最合適的地方？

渲染/從Render調用的方法？（似乎很奇怪）
ComponentDidMount +爲以後製作事件偵聽器？
GetInitialState？（但不應該有副作用？）
ComponentWillMount？
其他？

來源

2015-10-13 eedrah

退房'onEnter'在陣營路由器文檔，並且認證流例如，在回購 – knowbody

@knowbody - 真棒！這正是我要找的。所以答案確實是空的 - 在組件開始之前做重定向 – eedrah

我有一個類似的應用程序，並且我應用通量圖案。我創建了一個loginStore來保存登錄狀態，其他頁面可以觀看它。我使用higher order component來觀察商店更改，因此通過props將加載狀態傳遞到其他組件。然後我在componentWillReceiveProps做頁面轉換。

如果不應用流量的模式，我認爲你必須決定如何首先知道的外部條件。例如，如果外部條件來自props，則將邏輯置於componentWillReceiveProps。

不要將重定向邏輯渲染這應該是pure。每當您調用render方法時，它只會返回您的DOM的說明，而不會轉換您的頁面。

ComponentWillMount也不起作用。它只會被調用一次，並可能在您登錄之前被調用。 GetInitialState也有這個問題，它應該只提供組件的初始狀態。

來源

2015-10-14 01:24:57 ycavatars

如果我的道具來自我的Redux狀態，你有什麼建議？我想檢查'this.props.match.params.lockId'是否有相應的'lock._id'。如果不是，我想重定向回到'/'。 –

什麼是在React組件中執行重定向的適當生命週期階段？

回答

相關問題