Javascript 使用withRouter（）重定向时显示所有组件

我是Reactjs新手，我了解路由。在这里，我使用编程方式重定向

我认为这个流程应该是：

constructor->Willmount->render

，但目前的流程是

constructor->render->Willmount->render

当我执行这段代码时，发生的事情是，

/login

处的第一个组件正在显示，并且在标题组件显示之后（登录组件向上，标题在它之后）

类主扩展组件{
建造师（道具）{
超级（道具）；
this.state={userInfo:''}；
}
异步组件didmount（）{
let user=wait apiGateway.getUserInfo（）；
log（'did Mount1'）；
if（user==null）{
log（'Redirect'）；
this.props.history.push（'/login'）；
}否则{
console.log（“数据”）；
this.setState（{userInfo:user.data}）；
}
}
render（）{
const{authenticate，userInfo，onlineUser}=this.state；
console.log（'main component'）；
返回(
);
}
}
使用路由器导出默认值（主）；

在组件willmount中调用api是不好的做法。 您不能期望api调用在组件渲染时收到结果。 始终在

componentDidMount

中进行api调用

类主扩展组件{

    constructor(props) {
      super(props);
      this.state = { userInfo: ''};
    }


     async componentDidMount() {

      let user = await apiGateway.getUserInfo();
       console.log(' did Mount1');
        if(user == null){
          console.log('Redirect');
          this.props.history.push('/login');
        }else{
          console.log('data');
          this.setState({ userInfo : user.data });
        }

    }

    render() {
        const { authenticate, userInfo, onlineUser } = this.state;
        console.log('main component');
          return (
            <div className='Main'>
              <div className='Main-header'>
               <Header userInfo = {userInfo}/>
              </div>
            </div>
          );
        }

   }

构造函数（道具）{
超级（道具）；
this.state={userInfo:''}；
}
异步组件didmount（）{
let user=wait apiGateway.getUserInfo（）；
log（'did Mount1'）；
if（user==null）{
log（'Redirect'）；
this.props.history.push（'/login'）；
}否则{
console.log（“数据”）；
this.setState（{userInfo:user.data}）；
}
}
render（）{
const{authenticate，userInfo，onlineUser}=this.state；
console.log（'main component'）；
返回(
);
}
}

好的，我会处理的。。但代码仍然没有正确执行

    constructor(props) {
      super(props);
      this.state = { userInfo: ''};
    }


     async componentDidMount() {

      let user = await apiGateway.getUserInfo();
       console.log(' did Mount1');
        if(user == null){
          console.log('Redirect');
          this.props.history.push('/login');
        }else{
          console.log('data');
          this.setState({ userInfo : user.data });
        }

    }

    render() {
        const { authenticate, userInfo, onlineUser } = this.state;
        console.log('main component');
          return (
            <div className='Main'>
              <div className='Main-header'>
               <Header userInfo = {userInfo}/>
              </div>
            </div>
          );
        }

   }