在 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 方法时，它只会 returns 你的 DOM 的描述而不是转换你的页面。

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

Answer 2

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

执行 return null;

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

What is the appropriate lifecycle stage to do redirects in a React component?

javascript

reactjs

react-router