时间戳

首页 > 解决方案 > 导航到新页面不会导致前一页面被卸载

reactjs - 导航到新页面不会导致前一页面被卸载

问题描述

我有一个简单的离子应用程序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-user并且users相应的页面（NewUser和UserList）未卸载时：

在此处输入图像描述

根据这篇文章，这是设计使然

即使用户出于页面转换和状态目的而离开它们，我们也需要控制和保留页面在 dom 中

但是，我发现大多数最终用户都希望单击“新用户”来显示页面的新副本。如何在单击链接时卸载页面或实现相同的目标并“重置”页面？

标签： reactjsionic-frameworkreact-routerionic4

解决方案

每次用户导航到新的用户页面时，您都可以使用 Ionic Lifecycle 事件来重置表单的状态。每次显示页面时，IonViewWillEnter 都会触发，即使它已经被 React 挂载。

查看文档以获取使用信息：https ://ionicframework.com/docs/react/lifecycle

推荐阅读