React native React/Ionic:无效的钩子调用问题（使用历史记录进行重定向）

我正在尝试使用单击事件和历史记录将用户重定向到此路由“/tab1”。 我遇到一个无效的钩子调用问题。我试着把它搬出去，但似乎没什么效果

请帮忙！ 谢谢

代码：

export class Tab2 extends Component {
  
  constructor(props: any) {
    super(props);
    
    this.playVideo = this.playVideo.bind(this)
  }
  
  playVideo() {
    // THE PROBLEM
    const history = useHistory();
    // NEED SOME REDIRECTION ON CLICK HERE
    history.push("/tab1")
  }
  
  render() {
    
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonHeader collapse="condense">
            <IonToolbar>
              <IonTitle size="large">Tab 2</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonButton onClick={this.playVideo}>This is a play button</IonButton>
        </IonContent>
      </IonPage>
    );
  }
};

导出类Tab2扩展组件{
构造器（道具：任何）{
超级（道具）；
this.playVideo=this.playVideo.bind（this）
}
播放视频（）{
//问题
const history=useHistory（）；
//需要一些重定向点击这里
history.push（“/tab1”）
}
render（）{
返回(
表2
表2
这是一个播放按钮
);
}
};

只能在功能组件中使用挂钩

export const Tab2 =() =>  {
  
  const history = useHistory();

  const playVideo =()=> {
    history.push("/tab1")
  }
    
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonHeader collapse="condense">
            <IonToolbar>
              <IonTitle size="large">Tab 2</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonButton onClick={()=>playVideo()}>This is a play button</IonButton>
        </IonContent>
      </IonPage>
    );
};

export const Tab2=（）=>{
const history=useHistory（）；
const playVideo=（）=>{
history.push（“/tab1”）
}
返回(
表2
表2
playVideo（）}>这是一个播放按钮
);
};

只能在功能组件中使用挂钩

export const Tab2 =() =>  {
  
  const history = useHistory();

  const playVideo =()=> {
    history.push("/tab1")
  }
    
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonHeader collapse="condense">
            <IonToolbar>
              <IonTitle size="large">Tab 2</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonButton onClick={()=>playVideo()}>This is a play button</IonButton>
        </IonContent>
      </IonPage>
    );
};

export const Tab2=（）=>{
const history=useHistory（）；
const playVideo=（）=>{
history.push（“/tab1”）
}
返回(
表2
表2
playVideo（）}>这是一个播放按钮
);
};

我发现我使用的是类组件而不是功能组件。它起了神奇的作用！谢谢你的帮助！我知道我使用的是类组件而不是函数组件。它起了神奇的作用！谢谢你的帮助！