在 React 组件中进行重定向的适当生命周期阶段是什么？ [复制]

Question

我想根据外部条件渲染组件，否则在应用程序的其他地方重定向。

理想情况下，此重定向将在组件之前决定，但在某些情况下，我觉得我需要在组件中执行此操作。例如，在 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
}

这很复杂，因为有时应用程序在组件被请求之前就已经加载了。

哪个生命周期阶段最适合放置此重定向逻辑？

• 渲染/从渲染调用的方法？ （看起来很奇怪）
• ComponentDidMount + 为以后创建一个事件监听器？
• 获取初始状态？ （但不应该有副作用？）
• ComponentWillMount?
• 其他？

Answer 1

我有一个类似的应用程序，我应用了通量模式。我创建了一个loginStore 来保存登录状态，其他页面观看。我使用higher order component来观察store的变化，所以加载状态通过props传递给其他组件。然后我在UNSAFE_componentWillReceiveProps() 中进行页面转换。

如果你不应用通量模式，我认为你必须先决定如何知道外部条件。例如，如果外部条件来自props，则将逻辑放在UNSAFE_componentWillReceiveProps()中。

不要将重定向逻辑放入应为pure 的渲染中。每次调用render 方法时，它只返回您的DOM 的描述，而不是转换您的页面。

ComponentWillMount 也不起作用。它只被调用一次，并且可能在您登录之前被调用。 GetInitialState 也有这个问题，应该只提供你组件的初始状态。

Answer 2

我在componentDidMount 中进行了重定向，对此没有任何问题，因为我只需要在初始页面加载期间进行重定向。我支持其他人认为render 应该保持纯净，并始终返回有效的 DOM。如果我知道我需要重定向，我只需从render 执行return null;。