react路由懒加载lazy直接使用组件标签引发的问题?

简介: react路由懒加载lazy直接使用组件标签引发的问题?

前言

✨他们是天生勇敢的开发者,我们创造bug,传播bug,毫不留情地消灭bug,在这个过程中我们创造了很多bug以供娱乐。

✨ 这里是前端的一些bug 感兴趣的可以看看前端bug


错误场景

在react18+ts+vite项目中设置路由懒加载出现的问题

bug的类型:Uncaught Error

bug的提示: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.


上代码

// 路由表写法
// 路由懒加载
import React, {lazy} from "react";
import Home from "@/views/Home"
const About = lazy(() => import("@/views/About"))
import {Navigate} from "react-router-dom";
// 报错: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.
// 懒加载的模式
const routes = [
    {
        path: "/",
        element: <Navigate to="/home"/>
    },
    {
        path: "/home",
        element: <Home></Home>
    },
    {
        path: "/about",
        element: <About></About>
    },
]
export default routes


报错


解决方案

把需要路由懒加载的地方加上


<React.Suspense fallback={<div>Loading...</div>}>
  <About></About>
</React.Suspense>


ok了解决了 要是还感兴趣可以往下看


问题分析

React.Suspense


React.Suspense是React中的一个组件,用于在加载动态组件时显示加载状态或错误处理。它可以与React.lazy一起使用,以实现按需加载组件并在加载期间显示指定的加载界面。

React.lazy是React 16.6版本引入的特性,它使得可以按需地(懒加载)导入和渲染组件。这对于大型应用程序来说非常有用,可以减少初始加载时间和资源消耗。


然而,由于JSX语法的限制,无法直接在React.lazy中使用标签形式。JSX要求在编译时就能够静态地分析出组件的依赖关系,以便正确地进行打包和优化。但是,使用标签形式无法在编译时确定要渲染的组件,因为组件的选择是在运行时动态决定的。


为了解决这个问题,React提供了React.Suspense组件。通过将React.lazyReact.Suspense一起使用,我们可以在加载懒加载组件时显示指定的加载界面。当懒加载组件正在加载时,React.Suspense可以显示一个自定义的加载状态,例如loading动画、提示信息等。当加载完成时,React.Suspense会自动渲染出被懒加载的组件。


使用React.SuspenseReact.lazy的组合,可以更好地管理代码的拆分和按需加载,提供更好的用户体验和性能优化。它使得在需要时才加载和渲染组件成为可能,从而减少了初始加载时间和资源消耗。


后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
3月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
221 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
24天前
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
29 3
|
1月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
49 1
|
25天前
|
前端开发 API UED
React 按需加载 Lazy Loading
随着 Web 应用复杂度增加,页面加载速度成为影响用户体验的关键因素。React 提供了按需加载(Lazy Loading)功能,通过 `React.lazy` 和 `Suspense` 实现动态加载组件,减少初始加载时间,提升性能。本文从基础概念入手,探讨常见问题、易错点及解决方案,并通过代码示例详细说明。
32 0
|
1月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
34 2
React——路由Route
|
2月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
290 19
|
2月前
|
缓存 前端开发 UED
React Suspense 懒加载详解
【10月更文挑战第18天】React Suspense 是 React 16.6 引入的新特性,主要用于处理异步数据获取和组件懒加载。本文从 Suspense 的基本概念出发,介绍了其在代码分割和数据获取中的应用,通过具体代码示例展示了如何使用 `React.lazy` 和 `Suspense` 实现组件的懒加载,并探讨了实践中常见的问题及解决方法,帮助开发者提升应用性能和用户体验。
89 1
|
2月前
|
前端开发 网络架构
React 路由
10月更文挑战第11天
34 2
|
2月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
40 1
|
3月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
62 4
React技术栈-React路由插件之自定义组件标签