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

问题描述

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

当我通过浏览器访问 web 应用程序时，页面转换很好。

但在 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>

解决方法

问题在于，当加载 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>