笔记二十六、React中路由懒加载的扩展使用

26.1 在路由中配置懒加载 lazy

routes/index.jsx

代码

import {Navigate} from "react-router-dom";
import Home from "../components/Home";
import About from "../components/About";
// import Classify from "../components/Home/components/Classify.jsx";
// import Navigation from "../components/Home/components/Navigation.jsx";
import {lazy} from "react";//动态引入路径传入lazy函数
const Classify = lazy(() => import("../components/Home/components/Classify"));
const Navigation = lazy(() => import("../components/Home/components/Navigation"));export default [{path: '/home',element: <Home/>,children: [{path: 'classify',element: <Classify/>},{path: 'navigation',element: <Navigation/>},]},{path: '/about',element: <About/>,},{path: '/',element: <Navigate to='about'/>,}
]

26.2 Home/index.jsx 在父组件中使用 Suspense 

代码

import React, {Suspense} from "react";
import {NavLink, Outlet, useNavigate} from "react-router-dom";const Home = () => {// 类组件中不能用const定义变量// 选中高亮const activeStyle = ({isActive}) => {return isActive ? 'background' : "";};// 编程式路由导航const navigate = useNavigate();const toClassify = () => {navigate('classify', {state: {param_C: 'elendalee', param_D: 20}})};return (<div>首页的页面<div style={{display: "flex", justifyContent: 'center', marginTop: '20px'}}><button onClick={toClassify}>classify</button><NavLink to='navigation' className={activeStyle}>navigation</NavLink></div><div style={{background: 'red'}}>{/*fallback 兜底样式loading...*/}<Suspense fallback={<h2>loading...</h2>}>{/*<!-- Renders the child route's element, if there is one. -->*/}<Outlet/></Suspense></div></div>);}export default Home;

 

 

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

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

相关文章

自动化测试框架搭建步骤教程

说起自动化测试&#xff0c;我想大家都会有个疑问&#xff0c;要不要做自动化测试&#xff1f; 自动化测试给我们带来的收益是否会超出在建设时所投入的成本&#xff0c;这个嘛别说是我&#xff0c;即便是高手也很难回答&#xff0c;自动化测试的初衷是美好的&#xff0c;而测试…

CAD精品Eyeshot Fem 2023.3.630 -2023-11-05 Crack

2023.3.630 更新25天前 分享 跟随还没有人关注 改进的 Brep.TransformBy() 方法修复了工具栏内存泄漏修复了 glTF 材质导出期间的异常改进了 glTF 材质金属粗糙度设置修复了渐进式绘图和剪辑平面的错误在 Workspace.UseShaders 属性设置器中添加了缺少的 RenderContext.MakeCur…

Linux基础操作一:连接Linux

1、连接方式 1.1、SSH连接 SSH是Secure Shell的缩写&#xff0c;用于加密远程连接和文件传输的协议。可以使用SSH连接到远程Linux服务器以及在本地访问Linux计算机。SSH连接可以用于执行命令或者上传或下载文件。 – 在Linux命令行中使用SSH连接&#xff1a;可以使用命令ssh…

2024中国眼博会,全国眼康与眼镜品牌加盟展会,北京眼健康展

立足北京&#xff0c;面向全球&#xff0c;2024第六届CEYEE中国眼博会&#xff0c;将以大规模的展览面积在4月与您相会&#xff1b; ——春天是万物复苏的季节&#xff0c;更是企业开拓市场&#xff0c;抓住春季发展机遇的重要时节&#xff1b;第六届CEYEE中国眼博会将在2024年…

Vue+ElementUI+C#技巧分享:周数选择器

文章目录 前言一、周数的计算逻辑1.1 周数的定义1.2 年初周数的确定1.3 周数的计算方法 二、VueElementUI代码实现2.1 计算周数2.2 获取周的日期范围2.3 根据周数获取日期范围2.4 控件引用2.4.1 控件引用代码分析2.4.2 初始化变量代码分析 2.5 周数选择器完整代码 三、C#后端代…

Vue大屏自适应终极解决方案

v-scale-screenv-scale-screen是一个大屏自适应组件&#xff0c;在实际业务中&#xff0c;我们常用图表来做数据统计&#xff0c;数据展示&#xff0c;数据可视化等比较直观的方式来达到一目了然的数据查看&#xff0c;但在大屏开发过程中&#xff0c;常会因为适配不同屏幕而感…

sklearn 笔记:聚类

1 sklearn各方法比较 方法名称参数使用场景K-means簇的数量 非常大的样本数 中等簇数 簇大小需要均匀 Affinity Propagation 阻尼系数 样本偏好 样本数不能多 簇大小不均 MeanShift带宽 样本数不能多 簇大小均匀 谱聚类簇的数量 中等样本数 小簇数 簇大小均匀 层次聚类簇的数量…

【安全】【Linux】通过/proc/pid/获取进程信息

1 关于/proc /proc是一个内存文件系统&#xff0c;它保存了系统运行的信息&#xff0c;比如&#xff0c;系统启动时间、内存使用率等&#xff0c;同时&#xff0c;对于每个进程&#xff0c;都会有一个目录保存该进程的信息。 2 进程的基本信息 这里不会列出所有的文件&#…

职业测评链接

职业测评链接&#xff1a; https://www.16personalities.com/ch?utm_sourceresults-turbulent-campaigner&amp%3Butm_mediumemail&amp%3Butm_campaignch&amp%3Butm_contentlogo-0

selenium脚本编写及八大元素定位方法

selenium脚本编写 上篇文章介绍了selenium环境搭建&#xff0c;搭建好之后就可以开始写代码了 基础脚本,打开一个网址 from selenium import webdriver driver webdriver.Chrome()#打开chrome浏览器 driver.get(https://www.baidu.com) #打开百度打开本地HTML文件 上篇文章…

docker部署禅道18.3及官方文档中未提及的问题处理

禅道部署方式 文档地址:https://www.zentao.net/book/zentaopms/38.html#61.拉取镜像 docker pull easysoft/zentao:18.32.创建网络 docker network create --subnet172.172.172.0/24 zentaonet3.启动容器 docker run --name zentao -p 8090:80 -p 3307:3306 \ --networkze…

线性方程组的迭代法(Jacobi 迭代法和Gauss-Seidel 迭代法) C++代码

Jacobi 迭代法 #include <iostream> #include <cmath> #include <vector>using namespace std;// 定义方程组的系数矩阵和常数向量 vector<vector<double>> A {{20, 2, 3},{1, 8, 1},{2, -3, 15}}; vector<double> b {24, 12, 30};// 定…

brat文本标注工具——安装

目录 一、Linux系统安装 1. centOS系统 2. Ubuntu系统 3. macOS系统 4.说明 二、Google Chrome安装 1. 打开命令行&#xff0c;切换到管理者权限 2. 安装依赖 3. 下载Google浏览器的安装包 4. 安装Google Chrome 三、yum更新 四、Apache安装 安装Apache 启动Apac…

threeJs引入模型使用3D模型(vite+React+Ts)

要在 Three.js 中使用 3D 模型&#xff0c;你需要加载模型文件并将其添加到场景中。Three.js 支持多种不同的模型格式&#xff0c;比如 OBJ、FBX、GLTF 等。 init vitelatest //创建一个vite的脚手架 选择react并配置Ts 安装three.js准备 npm install react-three/drei np…

a-select:远程搜索——防抖节流处理——基础积累

a-select:远程搜索——防抖节流处理——基础积累 效果图下拉筛选数据&#xff1a;远程搜索功能&#xff1a; 效果图 下拉筛选数据&#xff1a; <a-selectshow-searchv-model"form.jobPositionCode"placeholder"请选择岗位"style"width: 100%"…

Redis哈希对象(listpack介绍)

哈希对象的编码可以是ziplist或者hashtable。再redis5.0版本之后出现listpack&#xff0c;为了是代替ziplist。 一. 使用ziplist编码 ziplist编码的哈希对象使用压缩列表作为底层实现&#xff0c;每当有新的键值对要加入到哈希对象时&#xff0c;程序都会先将保存了键值对的键…

【Linux 静态IP配置】

静态IP配置 1.NAT模式设置2.设置静态ip3.重启网络4.查看ip 1.NAT模式设置 首先设置虚拟机中NAT模式的选项&#xff0c;打开VMware&#xff0c;点击“编辑”下的“虚拟网络编辑器”&#xff0c;设置NAT参数 注意&#xff1a; VMware Network Adapter VMnet8保证是启用状态 …

ClassCMS2.4漏洞复现

ClassCMS2.4漏洞复现 环境搭建 任意文件下载漏洞复现 漏洞成因 ClassCMS2.4漏洞复现 CMS源码在附件中 环境搭建 使用phpstudy2016搭建web环境&#xff0c;php版本为5.5 安装CMS 这里选择Mysql数据库进行安装 用户名和密码都写默认的admin方便记忆 输入完成后点击安装 点…

【性能测试】性能测试监控关键指标

系统指标 检测性能测试是否有bug的关键指标 1、系统指标——与用户场景及需求直接相关。 并发用户数&#xff1a;某一物理时刻同时向系统提交请求的用户数。平均响应时间&#xff1a;系统处理事务的响应时间的平均值&#xff0c;对于系统快速响应类页面&#xff0c;一般响应…

货代FOB条款卖方必备的知识:发货人都要承担哪些费用呢?

据统计&#xff0c;中国出口中以FOB成交的占到70%&#xff0c;但专家指出&#xff1a;FOB对出口商的风险更大&#xff0c;有可能造成货、款两空的结局。 目前我国出口合同以FOB价格条款成交的比例越来越大&#xff0c;而且收货人指定船公司的少&#xff0c;指定境外货代的多&am…