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

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

本文关键字：周期 生命 是什么 组件 React 重定向      更新时间：2023-09-26

我想基于一个外部条件渲染一个组件，否则重定向到应用程序的其他地方。

理想情况下，此重定向将在组件之前决定，但在某些情况下，我觉得我需要在组件中执行此操作。例如，在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 +为以后做一个事件监听器?
  • GetInitialState吗?(但不应该有副作用?)
  • ComponentWillMount吗?
  • ?

我有一个类似的应用程序，我应用了flux模式。我创建了一个loginStore来保存登录状态，其他页面会监视它。我使用高阶组件来观察存储变化，因此加载状态通过props传递给其他组件。然后我在UNSAFE_componentWillReceiveProps()中做页面过渡。

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

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

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

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

相关文章：