为什么我在 iOS 上使用 Ionic 5 在 React Router 中看到断断续续的动画（页面转换）？

Question

我有一个 Ionic 5 React 应用程序，我运行作为我的服务器和 iOS 上的网络应用程序。

当我通过浏览器访问 webapp 时，页面转换正常。

但在 iOS 上，它们非常不稳定 -- 我看到一半的动画，空白屏幕大约半秒钟，然后加载新页面。

一段时间后，有时页面转换正常；有时他们没有。这只发生在 iOS 台设备上，我无法确定原因。

可能出了什么问题？

这是我的路由器：

  const appBasePath = '/webapp/';

  <IonReactRouter>
    <AppUrlListener />
    <IonRouterOutlet>
      <Route exact path={`${appBasePath}index.html`}>
        <Redirect to={appBasePath} />
      </Route>
      <Route exact path={routePageIndex}>
        <PageDisplayIndex />
      </Route>
      <Route exact path={routePagePrivacyPolicy}>
        <PageDisplayPrivacyPolicy />
      </Route>
      <Route exact path={appBasePath}>
        <UserAuthenticationZone setHasLoginToken={setHasLoginToken} />
      </Route>
      <Route>
        <Redirect to={appBasePath} />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>

Answer 1

问题是，当加载 Ionic React 应用程序时，如果没有匹配的路由并且您被发送到“匹配任何”路由组件，所有页面转换都会断断续续。

在 Web 应用程序上，应用程序正在 index.html 处加载，因此路由器找到匹配项并且转换正常。

但是在 iOS 上，默认路由是 /，您在路由器中没有匹配它。因此，如果您为 / 指定重定向，页面转换将顺利进行：

  const appBasePath = '/webapp/';

  <IonReactRouter>
    <AppUrlListener />
    <IonRouterOutlet>
      <Route exact path={`${appBasePath}index.html`}>
        <Redirect to={appBasePath} />
      </Route>
      <Route exact path={routePageIndex}>
        <PageDisplayIndex />
      </Route>
      <Route exact path={routePagePrivacyPolicy}>
        <PageDisplayPrivacyPolicy />
      </Route>
      <Route exact path={appBasePath}>
        <UserAuthenticationZone setHasLoginToken={setHasLoginToken} />
      </Route>
      <Route exact path="/">
        <Redirect to={appBasePath} />
      </Route>
      <Route>
        <Redirect to={appBasePath} />
      </Route>
    </IonRouterOutlet>
  </IonReactRouter>

为什么我在 iOS 上使用 Ionic 5 在 React Router 中看到断断续续的动画（页面转换）？

Why am I seeing choppy animations (page transitions) in React Router with Ionic 5 on iOS?

ionic-framework

react-router

ionic-react