0

I have a simple ionic app with an IonReactRouter

<IonApp>
  <IonReactRouter>
    <IonSplitPane contentId="main">
      <Menu selectedPage={selectedPage} />
      <IonRouterOutlet id="main">
      <Route path="/new-user" component={NewUser}  />
      <Route path="/users" component={UserList}  />
      </IonRouterOutlet>
    </IonSplitPane>
  </IonReactRouter>
</IonApp>

When you navigate between new-user and users the corresponding pages (NewUser and UserList) are not unmounted:

enter image description here

According to this post this is by design

we need to control and keep pages around in the dom even if a user navigates away from them for page transition and state purposes

However I find that most end users expect clicking on 'New User' to show a fresh copy of the page. How can i make the page be unmounted OR achieve the same goal and 'reset' the page when a link is clicked?

wal
  • 17,409
  • 8
  • 74
  • 109
  • Could you provide an online demo? I would like to make that HOC based on the demo, as long as you have no idea how to implement it – keikai Mar 18 '20 at 05:12

2 Answers2

2

You can use the Ionic Lifecycle events to reset the state of your form each time the user navigates to the new user page. IonViewWillEnter will fire each time the page is displayed, even though it is already mounted by React.

Check out the docs for usage information: https://ionicframework.com/docs/react/lifecycle

Ely
  • 3,200
  • 1
  • 21
  • 18
  • I've added all 4 lifecycle methods as per the docs to my functional component `NewUser` but none of them are firing - there are no errors - what could that be? – wal Mar 28 '20 at 22:56
  • @wal are they descendants of an IonReactRouter? Its needed for the events to fire. – Ely Mar 30 '20 at 15:14
0

Try to add "key" to "IonRouterOutlet" component and update it on route changed.

An example for Vue:

<ion-router-outlet :key="route.fullPath" ></ion-router-outlet>
Eduard K.
  • 1
  • 1