React+TS前台项目实战(二)-- 路由配置 + 组件懒加载 + Error Boundary使用

文章目录

  • 前言
  • 一、路由配置和懒加载lazy的使用
  • 二、TS版本Error Boundary组件封装
  • 三、在layout组件中使用Suspense组件和错误边界组件
  • 总结


前言

本文将详细介绍项目中的页面路由配置和异步组件懒加载处理,以提高用户体验,实现过渡效果。


一、路由配置和懒加载lazy的使用

(1)在React中,通常使用Suspense和lazy函数来实现懒加载,比如使用一个加载动画。
(2)通过这种方式,可以减少初始加载时间,提高应用程序的性能和响应速度。

// @/router/index.ts
import { lazy } from "react";
import { Navigate, RouteObject } from "react-router-dom";
const Layout = lazy(() => import("@/layout"));
const NotFound = lazy(() => import("@/pages/NotFound/index"));
const Home = lazy(() => import("@/pages/Home"));
const NervosDao = lazy(() => import("@/pages/NervosDao"));
const Tokens = lazy(() => import("@/pages/Tokens"));
const Xudts = lazy(() => import("@/pages/Xudts"));
const Charts = lazy(() => import("@/pages/Charts"));
const FeeRateTracker = lazy(() => import("@/pages/FeeRateTracker"));
const routes: RouteObject[] = [{path: "/",element: <Navigate to={`/zh/home`} />,},{path: "/:locale",element: <Navigate to={`/zh/home`} />,},{path: "/:locale",element: <Layout />,children: [// 其他子路由配置{path: "/:locale/home",element: <Home />,},{path: "/:locale/nervosdao",element: <NervosDao />,},{path: "/:locale/tokens",element: <Tokens />,},{path: "/:locale/xudts",element: <Xudts />,},{path: "/:locale/charts",element: <Charts />,},{path: "/:locale/fee-rate-tracker",element: <FeeRateTracker />,},],},{path: "/404",element: <NotFound />,},{path: "*",element: <Navigate to={`/404`} />,},
];
export default routes;

二、TS版本Error Boundary组件封装

// @/components/ErrorBoundary/index.jsx
import * as React from "react";
interface PropsType {children: React.ReactNode;
}
interface StateType {hasError: boolean;Error?: null | Error;ErrorInfo?: null | React.ErrorInfo;
}
export class ErrorBoundary extends React.Component<PropsType, StateType> {constructor(props: PropsType) {super(props);this.state = {hasError: false,Error: null,ErrorInfo: null,};}//控制渲染降级UIstatic getDerivedStateFromError(error: Error): StateType {return { hasError: true };}//捕获抛出异常componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {//传递异常信息this.setState((preState) => ({ hasError: preState.hasError, Error: error, ErrorInfo: errorInfo }));//可以将异常信息抛出给日志系统等等//do something....}render() {const { hasError, Error, ErrorInfo } = this.state;const { children } = this.props;//如果捕获到异常,渲染降级UIif (hasError) {return (<div><h1>{`Error:${Error?.message}`}</h1><details style={{ whiteSpace: "pre-wrap" }}>{ErrorInfo?.componentStack}</details></div>);}return children;}
}

三、在layout组件中使用Suspense组件和错误边界组件

// @/layout/index.tsx
import { Suspense } from "react";
import { ErrorBoundary } from "@/components/ErrorBoundary";
const LayOut = () => {// ....return (// ...<Suspense fallback={<span>loading...</span>}><ErrorBoundary><Outlet /></ErrorBoundary></Suspense>// ...);
};
export default LayOut;

总结

下一篇讲【国际化配置】。关注本栏目,将实时更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(2024,自监督 ViT,全监督 ViT,损失可视化,MAE,RC-MAE,自蒸馏,EMA)可视化自监督 ViT 的损失景观

Visualizing the loss landscape of Self-supervised Vision Transformer 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0 摘要 2 基础&#xff1a;MAE 和 RC-MAE 3 损失景观 3.1 分…

QT C++(QT控件 QPushButton,QRadioButton,QCheckBox)

文章目录 1. QPushButton 普通按钮2. QRadioButton 单选按钮3. QCheckBox 复选按钮 1. QPushButton 普通按钮 QPushButton中的重要属性 text&#xff1a;按钮中的文本icon&#xff1a;按钮的图标iconSize&#xff1a;按钮中图标的尺寸shortCut&#xff1a;按钮对应的快捷键&a…

Unity3d使用3D WebView for Windows and macOS打开全景网页(720云)操作问题记录

问题描述 使用Unity3d内嵌网页的形式打开720云中的全景图这个功能&#xff0c;使用的是3D WebView for Windows and macOS插件&#xff0c;720云的全景图在浏览器上的操作是滑动鼠标滚轮推远/拉近全景图&#xff0c;鼠标左键拖拽网页可以旋转全景图内容。网页的打开过程是正常…

RK3588 Android13自定义一个按键实现长按短按

一、kernel修改 diff --git a/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsi b/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsi index 5aae5c613825..4cc1223f9cbf 100755 --- a/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsib/arch/arm64/boot/dts/rockchip…

IDEA创建Mybatis项目

IDEA创建Mybatis项目 第一步&#xff1a;创建库表 -- 创建数据库 create database mybatis_db;-- 使用数据库 use mybatis_db;-- 创建user表 CREATE TABLE user (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL,password VARCHAR(50) NOT NULL,email VARC…

transformer中对于QKV的个人理解

目录 1、向量点乘 2、相似度计算举例 3、QKV分析 4、整体流程 (1) 首先从词向量到Q、K、V (2) 计算Q*&#xff08;K的转置&#xff09;&#xff0c;并归一化之后进行softmax (3) 使用刚得到的权重矩阵&#xff0c;与V相乘&#xff0c;计算加权求和。 5、多头注意力 上面…

记一次postgresql拼接函数string_agg() 和row_number() 使用

PG两个函数使用需求和简单介绍 需求背景介绍第一个需求背景是这样的需求升级一下接下来讲讲STRING_AGG()基本语法排序 然后我们再说说ROW_NUMBER()基本语法使用 row_number() over (partition by) 进行分组统计使用 row_num限定每组数量 需求背景介绍 第一个需求背景是这样的 …

【MATLAB源码-第222期】基于matlab的改进蚁群算法三维栅格地图路径规划,加入精英蚁群策略。包括起点终点,障碍物,着火点,楼梯。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蚁群算法&#xff08;Ant Colony Optimization&#xff0c;ACO&#xff09;是一种通过模拟蚂蚁觅食行为的启发式优化算法。它由意大利学者Marco Dorigo在20世纪90年代初提出&#xff0c;最初用于解决旅行商问题&#xff08;T…

从《千脑智能》看大模型

千脑智能与大模型 千脑智能介绍 世界模型千脑智能理论——对大脑的全新理解旧大脑&#xff1a;演化的历史烙印新大脑&#xff1a;智慧的创新引擎新旧大脑的互动与争斗启示与借鉴 大脑对信息的处理和建模六根六尘六识 新脑&#xff1a;智能的创新中枢旧脑&#xff1a;生存的本能…

Web前端笔记:深入探索与实战精髓

Web前端笔记&#xff1a;深入探索与实战精髓 Web前端&#xff0c;作为构建互联网世界的基石之一&#xff0c;承载了用户与网页交互的桥梁作用。对于前端开发者而言&#xff0c;不断积累与更新自己的知识体系显得尤为重要。本文将从四个方面、五个方面、六个方面和七个方面&…

Spring的Controller是单例还是多例,如何保证线程安全的。

目录 验证是否单例&#xff08;默认单例&#xff09; 多例测试 单例对象成员变量测试 多例对象成员变量测试 解决方案 结论&#xff1a; 补充说明 答案&#xff1a;controller默认是单例的&#xff0c;不要使用非静态的成员变量&#xff0c;否则会发生数据逻辑混乱。 正…

求宇文玥在水下的浮力和赵丽颖捞他的时间

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 2024年汉东省在达康书记的带领下率先实现高考试点改革。为让更多的考生能提升对他们的理解和记忆&#xff0c;把电视剧的场景融入考试题目中。确保学生看一遍就懂&#xff0c;想…

STM32 proteus + STM32Cubemx仿真教程(第一课LED教程)

文章目录 前言一、STM32点亮LED灯的原理1.1GPIO是什么1.2点亮LED灯的原理 二、STM32Cubemx创建工程三、proteus仿真电路图四、程序代码编写1.LED灯操作函数介绍HAL_GPIO_WritePin函数原型参数说明示例代码 HAL_GPIO_TogglePin函数原型参数说明示例代码 2.代码编写3.烧写程序 总…

(三)React事件

1. React基础事件绑定 语法&#xff1a; on 事件名称 { 事件处理程序 }&#xff0c;整体上遵循驼峰命名法 App.js //项目根组件 //App -> index.js -> public/index.html(root)function App() {const handleClick () > {console.log(button被点击了)}return (<…

【值得一看的新特性】JDK21

文章目录 1. JEP 425: 虚拟线程 (Virtual Threads)1.1 是什么1.2 为什么1.3 怎么用 2. JEP 428: 结构化并发 (Structured Concurrency)2.1 是什么2.2 为什么2.3 怎么用 3. JEP 440: Record模式 (Record Patterns)3.1 是什么Record类型 3.2 为什么3.3 怎么用 4. JEP 427: switch…

9.0 Android中的网络技术

Android中网络相关的技术&#xff0c;主要分别两种&#xff0c;一种为直接显示网页&#xff0c;另外一种为获取服务器中的数据进行设置。 权限声明 访问网络是需要声明权限 <manifest xmlns:android"http://schemas.android.com/apk/res/android"package"…

mac m1使用docker安装mysql5.7,并且开启binlog

1. 使用 mysql/mysql-server:5.7 镜像 创建一个名为 docker-compose.yml 的文件&#xff0c;内容如下&#xff1a; version: 3.1services:mysql:image: mysql/mysql-server:5.7container_name: mysql57ports:- "3306:3306"environment:MYSQL_ROOT_PASSWORD: yourpa…

k8s学习--kubernetes服务自动伸缩之水平收缩(pod副本收缩)VPA详细解释与安装

文章目录 前言VPA简介简单理解详细解释VPA的优缺点优点1.自动化资源管理2.资源优化3.性能和稳定性提升5.成本节约6.集成性和灵活性 缺点1.Pod 重启影响可用性2.与 HPA 冲突3.资源监控和推荐滞后&#xff1a;4.实现复杂度&#xff1a; 核心概念Resource Requests 和 Limits自动调…

51单片机采用定时器T1的方式1的中断计数方式,外接开关K4按4次后,8只LED闪烁不停

1、功能描述 采用定时器T1的方式1的中断计数方式&#xff0c;外接开关K4按4次后&#xff0c;8只LED闪烁不停 2、实验原理 定时器原理:8051的定时器可以用于计数外部事件或执行内部定时操作。在本程序中&#xff0c;定时器1被设置为模式2&#xff0c;即8位自动重装载定时器模式…

DefaultTokenServices源码

文章目录 DefaultTokenServices实现的接口AuthorizationServerTokenServicesResourceServerTokenServicesConsumerTokenServices 代码属性定义createAccessToken(OAuth2Authentication)createRefreshToken(OAuth2Authentication) DefaultTokenServices DefaultTokenServices是…