0

Estoy intentando hacer una aplicación con Ionic y React, pero tengo el problema de que no sé cómo ir a otra página desde un botón.

Probé la explicación de la documentación de Ionic usando el Using NavLink, pero cuando lo uso, dice Attempted import error: 'IonNavLink' is not exported from '@ionic/react'. cuando si que lo tengo exportado.

Me gustaría encontrar una solución para IonNavLink o simplemente otra forma de ir a otra página al hacer clic en el botón.

Además, quiero pasar un id del botón a la nueva página.

Código del botón:

return (
    <IonCol>
      <IonList id="listFolder">
        {Array.isArray(folders) ? folders.map((folder, index) => (
          <IonToolbar class="divFolder" key={folder.id}>
              <IonButton class="folder" color="white" style={{textTransform: 'capitalize'}} onClick="">
                {JSON.parse(folder.value)[0]}
              </IonButton>
            <IonToggle class="toggle" checked={toggleValue[index]} onIonChange={(event) => handleToggleChange(event, index, folder.id)} />
            <IonButton class="option" onClick="">
              <IonIcon icon={ellipsisVertical} style={{color: 'white'}}></IonIcon>
            </IonButton>
          </IonToolbar>
          )) : null}
      </IonList>
    </IonCol>
  );

Otra página:

class GroupsPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentFolder: null,
            showAlarmModal: false,
            showFolderModal: false
        };
    }

    componentDidMount(){
        this.folderListRef.loadFolders();
        this.alarmListRef.loadAlarms();
    }

    handleAddFolder = () => {
        this.setState({ showFolderModal: true })
    };

    handleAddAlarm = () => {
        this.setState({ showAlarmModal: true });
    };

    reloadAlarms = () => {
        this.alarmListRef.loadAlarms();
    }

    reloadFolders = () => {
        this.folderListRef.loadFolders();
    }

    render(){
        return (
          //...
        );
    }
}

export default GroupsPage;

He intentado con:

  • import { Link } from 'react-router-dom';
  • import { useHistory } from 'react-router-dom';
  • import { IonRouterLink } from '@ionic/react';
1

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.