Ionic-React 自定义动画过渡渲染页面两次

如何解决Ionic-React 自定义动画过渡渲染页面两次

我有一个自定义 Transition，它从 https://www.damirscorner.com/blog/posts/20200501-CustomizingPageTransitionsInIonic5.html 滑入我的页面路线。我注意到如果我想访问 sideMenu 上的页面（因为我实现了 sidemenu + tab），它看起来好像呈现页面两次。所以动画会尝试滑入，同时，我已经看到了页面

演示：

这仅发生在包含在侧边菜单中的页面上，没有侧边菜单或注册页面的登录页面不会这样做。我尝试在 sideMenu 中创建另一个页面，它做了同样的事情。所以，我不知道也许是 sideMenu 这样做了

路线设置

 <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <SideMenu />
          <IonRouterOutlet id="main">
            <MainTabs />
            <Route exact path="/" component={Index} />
            <Route exact path="/get-started" component={GetStarted} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/search" component={Search} />
            <Route exact path="/profile" component={Profile} />
            <Route exact path="/settings" component={Login} />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

SideMenu.tsx

<IonMenu contentId="main" type="overlay" className="side-menu">
  <IonContent>
    <div className="ion-padding d-flex justify-center align-center">
      <div className="round bg-gray p-1 w-xs">
        <IonAvatar
          onClick={() => {
            navigate("/profile","forward"); // Navigation
          }}
          className="cursor ion-activatable ripple-parent"
        >
          <img src={Man} alt="avatar" />
          <IonRippleEffect type="bounded"></IonRippleEffect>
        </IonAvatar>
      </div>
      <div className="ml-4">
        <IonText>
          <h4 className="bold deep-dark-text fs-lg-1 mb-1">John Doe</h4>
        </IonText>
        <IonText>
          <h4 className="fw-light grey-text deep-dark-text mb-2 mt-0 fs-md-1">
            @Johnny01
          </h4>
        </IonText>
        <IonText>
          <h4 className="bold deep-dark-text mt-3 fs-md-1">
            50k <span className="grey-text fw-light">Subscribers</span>
          </h4>
        </IonText>
      </div>
    </div>
    <div className="divider"></div>
    <div className="ion-padding pt-0">
      <IonList>
      
        <IonItem
          lines="none"
          className="pb-3"
          button
          onClick={() => {
            navigate("/settings","forward") // Navigation
          }}
        >
          <div slot="start" className="mt-2">
            <RiSettings4Line color="#7a8fa6" size="24" />
          </div>
          <IonLabel className="fw-reg deep-dark-text">
            <p className="fs-md-2 deep-dark-text">Settings</p>
          </IonLabel>
        </IonItem>
       
      </IonList>
    </div>
  </IonContent>
</IonMenu>

即使显示白色背景我也不介意，但在实际页面中滑动之前不要显示页面内容。 IonReactRouter 可能是什么原因？