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';