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

Question

我正在尝试使用单击事件和历史记录将用户重定向到此路由“/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>
    );
  }
};

标签： react-nativeionic-frameworkeventsroutesreact-hooks

Answer 1

你只能在功能组件中使用钩子

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>
    );
};