在React中使用if语句判断页面不存在时重定向用户是否为最佳实践？

你当前在renderWithRoot方法里直接调用history.push的做法是不合理的，原因在于React的render阶段要求是纯函数行为——不能产生路由跳转、状态修改这类副作用。这么做会破坏组件渲染的可预测性，可能触发额外的重复渲染，甚至引发React的警告。

推荐的两种正确实现方式： #

1. 使用React Router的<Redirect>组件（更符合React渲染逻辑）

直接在render阶段根据条件渲染重定向组件，通过UI渲染的方式触发路由跳转：

renderWithRoot(component) {
  const { classes, profileExists } = this.props;

  if (!profileExists) {
    return <Redirect to="/homepage" />;
  }

  return (
    <div className={classes.root}>
      {component}
    </div>
  );
}

2. 在生命周期钩子中处理副作用（类组件）

如果是类组件，把跳转逻辑放到componentDidMount和componentDidUpdate中，专门处理这类副作用操作：

componentDidMount() {
  const { profileExists, history } = this.props;
  if (!profileExists) {
    history.push('/homepage');
  }
}

componentDidUpdate(prevProps) {
  const { profileExists, history } = this.props;
  // 仅当profileExists状态变化时执行跳转，避免重复触发
  if (prevProps.profileExists !== profileExists && !profileExists) {
    history.push('/homepage');
  }
}

renderWithRoot(component) {
  const { classes } = this.props;
  return (
    <div className={classes.root}>
      {component}
    </div>
  );
}

如果是函数组件，对应使用useEffect钩子即可，逻辑和类组件的生命周期一致。

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