IonIcon go back click event

Ionic Framework Ionic React
1

Hello everyone.

It has an IonIcon with an arrow and I need to press it to return to the previous page. How is it possible to implement that?

What I get is:

Object is possibly ‘undefined’.ts(2532)

in this.props.history.push(‘/’) sentences

const Ingresar: React.FC = () => {

    const goBack = () => {
        this.props.history.push('/')
        };

  return (
    <IonPage>
      <IonHeader>
      <IonToolbar>
        <IonGrid>
          <IonRow>
          <IonCol><IonIcon icon={arrowBack} onClick={goBack} slot="start" id="flecha-volver">  </IonIcon></IonCol>
          <IonCol id="columna2" ><strong id="texto-pagina">Registro de usuario</strong></IonCol>
          </IonRow>
        </IonGrid>
      </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IngresarDatos></IngresarDatos>
      </IonContent>
    </IonPage>
  );
};

Thanks in advance.

2

In my experience, I’ve found better luck wrapping icon in a button component; it might be that icons dont support onClick.

Try putting around the icon and see if that works. You can then style the button how you see fit,

1 Like
3

Disclaimer: I know virtually nothing about React.

However, the error message seems fairly insistent that either this.props or this.props.history is not guaranteed to be defined at the moment that you are writing this.props.history.push('/'), which requires said guarantees. So I would either reevaluate whether you can change the definitions of those things to eliminate any possibility of them being undefined, or guard off that line with something like if (this.props && this.props.history).

1 Like
4

Thanks. How can I go from the current web page to another link?, for example /home with an IonIcon