Así que tengo este div que cambia de un componente a otro cambiando el state después de hacer clic en un botón.
{ !showForm ? ( <div className={styles.showTicketContainer}> <div className={styles.showTicketBox}> //some code for UI </div> <div className={styles.whitelistBox}> <Button className={styles.whiteListToggleButton} shape="round" onClick={() => setShowForm(() => true)}>Whitelist</Button> </div> </div> ) : ( <InputEmail /> // render another component within this div after clicking the whitelist button )} Así que visualizar esto es de esto a esto . Y me gustaría agregar un button en la página de correo electrónico para poder volver a la primera página .
¿Sigo usando la misma manera que es:
{ !showForm ? ( //some UI code ) : ( <someComponent/> )}o hay alguna manera mejor de hacer esto.
puedes usar esto:
const history = useHistory(); history.goBack();Si está creando páginas, definitivamente sugiero usar React Router o una biblioteca similar para manejar esto. Con React Router, puede "regresar" fácilmente a la página anterior, e incluso el botón "Atrás" en el navegador del usuario funcionará, en lugar de tener que hacer clic en un botón.
Este código funcionará. Agrégalos donde sea necesario.
import { useHistory } from "react-router-dom"; function demo () { let history = useHistory(); const goToPreviousPath = () => { history.goBack() } return ( <div> <Button onClick={goToPreviousPath} > Back </Button> </div> ): }