当前位置: 首页 > news >正文

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;

总结

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

相关文章:

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

文章目录 前言一、路由配置和懒加载lazy的使用二、TS版本Error Boundary组件封装三、在layout组件中使用Suspense组件和错误边界组件总结 前言 本文将详细介绍项目中的页面路由配置和异步组件懒加载处理&#xff0c;以提高用户体验&#xff0c;实现过渡效果。 一、路由配置和懒…...

成为电商低价神秘顾客访问员的必备条件(深圳神秘顾客公司)

电商低价神秘顾客需要具备以下条件&#xff0c;以确保能够执行有效的调查任务并为企业提供有价值的反馈&#xff1a; 1、细致的观察能力&#xff1a;神秘顾客访问员需要具备细致的观察能力&#xff0c;能够全面、细致地观察电商平台的购物流程、商品详情、服务细节等。这包括注…...

现货黄金交易多少克一手?国内外情况大不同

如果大家想参与国际市场上的现货黄金交易&#xff0c;就应该从它交易细则的入手&#xff0c;先彻底认识这个品种&#xff0c;因为它是来自欧美市场的投资方式&#xff0c;所以无论是从合约的计的单位&#xff0c;计价的货币&#xff0c;交易的具体时间&#xff0c;以及买卖过程…...

LNMP与动静态网站介绍

Nginx发展 Nginx nginx http server Nginx是俄罗斯人 Igor Sysoev(伊戈尔.塞索耶夫)开发的一款高性能的HTTP和反向代理服务器。 Nginx以高效的epoll.kqueue,eventport作为网络IO模型&#xff0c;在高并发场景下&#xff0c;Nginx能够轻松支持5w并发连接数的响应&#xff0c;并…...

教育小程序开发:技术实现与实践案例

随着信息技术的不断进步&#xff0c;教育小程序在教育领域的应用越来越广泛。教育小程序开发不仅可以提高教学效率&#xff0c;还能够提供个性化的学习体验。本文将以技术代码为例&#xff0c;详细介绍教育小程序开发的关键技术和实践案例&#xff0c;帮助开发者更好地理解和实…...

LeetCode 746.使用最小花费爬楼梯

题目&#xff1a; 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费…...

软件设计模式概述

一 软件模式概述 软件设计模式是在软件开发过程中经过验证的、可重复使用的最佳实践。 它们提供了解决常见设计问题的模板和指导方针&#xff0c;有助于开发人员编写高质量、可维护和可扩展的代码。 软件设计模式通常基于面向对象的编程范式&#xff0c;并利用封装、…...

短剧片源火爆,千金难求好剧源

前言 在当今快节奏的生活中&#xff0c;短剧以其精悍的篇幅、吸睛的剧情和便捷的观看方式&#xff0c;异军突起&#xff0c;吸引了大量观众的关注和喜爱。这些短剧不仅让人们在忙碌的间隙轻松娱乐&#xff0c;更以其高潮迭起的情节设计&#xff0c;让观众在短时间内便能体验到…...

MES系统定制 | 生产调度车间排班计划/MES排程排产

MES系统是一种集成化的生产信息化管理系统&#xff0c;通过实时收集和分析车间生产数据&#xff0c;帮助企业实现生产过程的自动化控制和监测。它可以跟踪生产计划、设备状态、物料流动等关键指标&#xff0c;并提供实时报表和决策支持。在这个系统中&#xff0c;车间班次排班是…...

【Anaconda】 anaconda常用命令总结

【Anaconda】 anaconda常用命令总结 一、创建虚拟环境二、激活/使用/进入某个虚拟环境三、退出当前环境四、复制某个虚拟环境五、删除某个环境六、查看当前所有环境七、查看当前虚拟环境下的所有安装包八、安装或卸载包(进入虚拟环境之后&#xff09;九、分享虚拟环境十、源服务…...

VIsio Professional 绘图

...

Flutter InAppWebView Unknown feature SUPPRESS_ERROR_PAGE

在使用InAppWebView的initialData加载html代码的时候,出现java.lang.RuntimeException: Unknown feature SUPPRESS_ERROR_PAGE的出错误 E/MethodChannel#flutter/platform_views(16853): Failed to handle method call E/MethodChannel#flutter/platform_views(16853):<...

linux系统PXE自动装机和无人值守

一、PXE 1.PXE&#xff1a;c/s模式&#xff0c;允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。&#xff08;c/s客户端和服务端都可以是多台&#xff09; 2.PXE优点&#xff1a;规模…...

大模型的高考数学成绩单:及格已经非常好了

让考生头皮发麻的高考数学&#xff0c;可难倒了顶尖 AI 大模型。 一年一度的高考即将落幕&#xff0c;衷心希望各位考生都超常发挥&#xff0c;考出满意的好成绩&#xff01;&#xff01; 和往年一样&#xff0c;除了让 AI 大模型写写高考作文&#xff0c;我们也选取了六家国…...

【漏洞复现】CraftCMS ConditionsController.php 代码执行漏洞(CVE-2023-41892)

0x01 产品简介 Crat CMS是一个开源的内容管理系统&#xff0c;它专注于用户友好的内容创建过程&#xff0c;逻辑清晰明了&#xff0c;是一个高度自由&#xff0c;高度自定义设计的平台&#xff0c;可以用来创建个人或企业网站也可以搭建企业级电子商务系统。 0x02 漏洞概述 …...

代码随想录算法训练营第三十八 |● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

我在每一个算法开始之前都会去认真的看一下这个理论基础&#xff0c;或者说是算法的主要思想&#xff0c;可以直接看视频carl讲解的很清晰&#xff1b;其次还会大致看一下这一part中的题型及难度 动态规划理论基础讲解链接&#xff1a;https://programmercarl.com/%E5%8A%A8%E6…...

如何有效处理服务器后台密码暴露

服务器后台密码的暴露是信息安全领域中的严重事件&#xff0c;它可能引发未经授权的数据访问、恶意软件植入或系统功能滥用等一系列问题。本文将探讨几种处理服务器后台密码暴露的有效策略&#xff0c;包括紧急响应步骤、密码安全增强措施及长期预防机制&#xff0c;并提供实际…...

使用本地大模型调用代码,根本就是一场骗局!

通过大模型调用其他工具到底可不可行&#xff1f;ChatGPT 或许能轻松搞定一切&#xff0c;但同样的需求落在本地大模型上&#xff0c;恐怕就要打个问号了。 法国开发工程师 Emilien Lancelot 尝试了多款号称具备工具调用功能的 agent 框架&#xff0c;来看看本地大模型到底能不…...

一些简单却精妙的算法

文章目录 1.树状数组2.红黑树3.星星打分4.欧几里得算法5.快速幂6.并查集 在编程的世界里&#xff0c;简洁的代码往往隐藏着深邃的智慧。一起来看看那些看似简单&#xff0c;实则精妙绝伦的代码片段&#xff0c;体会编程语言的优雅与力量。 1.树状数组 int lowbit(int x) { …...

git多账号使用报错:You don‘t have permissions to push to “xxx/xxxx“ onGitHub. Would

git多账号使用报错&#xff1a;You don’t have permissions to push to “xxx/xxxx” onGitHub. Would 有的时候我们有两个甚至多个git账号&#xff08;公司的git账号和自己的github&#xff09;&#xff0c;为了不混淆提交&#xff0c;我们需要在提交之前查看自己的git账号必…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...