Ionic 导航到新页面不会导致上一页被卸载

am46iovg  于 2022-12-20  发布在  Ionic
关注(0)|答案(2)|浏览(137)

我有一个简单的离子应用程序,带有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>

new-userusers之间导航时,不会卸载相应的页面(NewUserUserList):

根据这篇文章,这是设计
我们需要控制和保持dom中的页面,即使用户为了页面转换和状态目的而离开它们
然而,我发现大多数最终用户都希望点击“新建用户”以显示页面的新副本。如何在点击链接时卸载页面或实现相同的目标并“重置”页面?

nhhxz33t

nhhxz33t1#

每次用户导航到新用户页时,您都可以使用Ionic生命周期事件重置表单的状态。每次显示该页时,IonViewWillEnter都将触发,即使React已装载该页。
查看文档以了解使用信息:https://ionicframework.com/docs/react/lifecycle

z0qdvdin

z0qdvdin2#

尝试将“key”添加到“IonRouterOutlet”组件,并在路由更改时更新。
Vue示例:

<ion-router-outlet :key="route.fullPath" ></ion-router-outlet>

相关问题