为什么我在iOS上看到带有Ionic 5的React Router中出现不稳定的动画(页面过渡)？
为什么我在iOS上看到带有Ionic 5的React Router中出现不稳定的动画(页面过渡)？
提问于 2021-05-18 12:45:41
我有一个Ionic5React应用程序，我在我的服务器和iOS上以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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-18 12:45:41
问题是，当Ionic React应用程序加载时，如果没有匹配的路由，而您被发送到"matches any“路由组件，则所有页面转换都将不稳定。
在webapp上，应用程序是在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67586471
复制相关文章
相似问题
腾讯云开发者
