onClick button to go back to previous page/component React-CodePudding

So I have this div that switch from one component to another by changing the state after clicking on a button.

{ !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
)}

So to visualize this is from this to this. And I would like to add one button on the email page so that I can go back to the first page.
Do I still use the same way which is:

{ !showForm ? (
      //some UI code
) : ( 
   <someComponent/>
)}

or is there any better way to do this.

CodePudding user response：

If you're creating pages, I definitely suggest using React Router or a similar library to handle this. With React Router, you can easily "back" out to the previous page, and even the "back" button in the user's browser will work, instead of having to click a button.

CodePudding user response：

you can use this:

 const history = useHistory();
  history.goBack();