react-router-dom懒加载时出现的闪屏问题解决方法~~

2,009 阅读1分钟

初学react,对着文档一顿操作猛如虎,一看bug250。对着文档学习实在是太惨了,随时可能出现问题,本着见招拆招的想法,把遇到的问题记录一波,预防第二次踩坑

闪屏的问题分析

App.tsx app.png 使用了Suspense将整个路由包裹住

route.tsx routes.png

在路由表里面使用lazy的方式懒加载引入组件,当页面跳转到目标路由时,路由加载中就会触发Suspense的fallback,会展示loading文字提示,当路由加载完毕后显示组件内容,就是会出现闪屏。 页面体验十分难受~~~~~~~~~~~~~~~~~~~~

解决方案

app.tsx app.png

app.tsx直接return useRoutes()内容,不使用Suspense组件

route.tsx

code.png