【React】react 使用 lazy 懒加载模式的组件写法,外面需要套一层 Loading 的提示加载组件

react 组件按需加载问题解决

      • [1 错误信息](#1 错误信息)
      • [2 解决方案](#2 解决方案)

1 错误信息

react 项目在创建 router 路由时,使用 lazy 懒加载时,导致以下报错:

  • The above error occurred in the <Route.Provider> component:
  • Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

2 解决方案

懒加载模式的组件写法,外面需要套一层 Loading 的提示加载组件。

javascript 复制代码
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'

// 按需引入
const Home = lazy(() => import('@/views/Home'))
const About = lazy(() => import('@/views/About'))
const User = lazy(() => import('@/views/User'))

// 按需引入导致报错:懒加载模式的组件写法,外面需要套一层 Loading 的提示加载组件
const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<>Loading</>}>
    {comp}
  </React.Suspense>
)

const routes = [
  {
    path: '/',
    element: <Navigate to='/home' />
  },
  {
    path: '/home',
    element: withLoadingComponent(<Home />)
  },
  {
    path: '/about',
    element: withLoadingComponent(<About />)
  },
  {
    path: '/user',
    element: withLoadingComponent(<User />)
  }
]

export default routes
相关推荐
林希_Rachel_傻希希几秒前
this 的指向与 bind() 方法详解
前端·javascript
Helloworld1 分钟前
掌握 JavaScript 的“变色龙”——this 关键字完全指南
javascript
枫,为落叶8 分钟前
【vue】设置时间格式
前端·javascript·vue.js
渣哥14 分钟前
对象居然不用自己创建?Spring 依赖注入机制的真相惊呆了!
javascript·面试·github
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
南城巷陌2 小时前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
Rhys..2 小时前
JS - npm init
开发语言·javascript·npm
程序0073 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
没有鸡汤吃不下饭3 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
云枫晖3 小时前
JS核心知识-模块化
前端·javascript