React组件Props引发重定向闪烁：应操作哪个生命周期？

这个问题的核心是组件初始化时Redux的ifYes状态还未就绪——初始状态可能是false或者undefined，导致组件先渲染了指向No的重定向，等Redux异步获取到数据更新ifYes为true后，才切换到Yes的重定向，从而出现短暂的闪烁。

最佳解决思路：先判断数据加载状态，再执行重定向 #

你不需要特意操作某个生命周期钩子，而是通过初始状态设置+渲染阶段的条件判断来避免未就绪时的重定向：

1. 修改Redux初始状态：给ifYes设置一个代表「加载中」的初始值（比如null），而不是默认的false：

// Redux reducer的初始state
const initialState = {
  ifYes: null, // null = 数据还在加载
  // 其他状态字段
};

2. 组件渲染时先判断加载状态：在渲染重定向之前，先检查ifYes是否已经就绪（不是null），如果还在加载，就渲染加载提示或者空内容，不触发任何重定向：

// 类组件示例
class MyComponent extends React.Component {
  render() {
    const { ifYes } = this.props;

    // 数据加载中，不渲染重定向
    if (ifYes === null) {
      return <div>加载中...</div>; // 或者return null，让组件暂时不显示内容
    }

    // 数据就绪后，再执行对应的重定向
    return (
      <>
        {!ifYes && <Redirect component={No} />}
        {ifYes && <Redirect component={Yes} />}
      </>
    );
  }
}

如果一定要结合生命周期钩子（类组件） #

如果你的数据请求是在组件内部触发的，可以在componentDidMount里发起请求，确保组件挂载后尽快获取数据，减少加载等待时间：

componentDidMount() {
  // 触发Redux action获取数据，更新ifYes状态
  this.props.fetchIfYesData();
}

不过核心还是通过加载状态的判断，避免在数据未就绪时触发任何重定向，从根源上解决闪烁问题。

内容的提问来源于stack exchange，提问作者JOHN C