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

Question

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

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

但在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应用程序时，如果没有匹配的路由，您将被发送到；匹配任何"；路由组件，所有的页面转换都将是断断续续的。

在网络应用程序上，该应用程序在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>