React学习———React Router
React Router
React Router 是 React 应用中用于管理路由的流行库,它允许你在单页应用(SPA)中实现导航和页面切换而无需重新加载页面。
安装
npm install react-router-dom
核心组件
<BrowserRouter>
- 使用
HTML5
的历史记录API(pushState
、replaceState
和popstate
事件)来保持UI
与URL
的同步。 - 通常包裹在应用的根组件中,提供基于浏览器历史记录的路由功能。
import { BrowserRouter } from 'react-router-dom'
function App(){return (<BrowserRouter >{/* 其他组件 */}</BrowserRouter >)
}
<HashRouter>
- 通过监听浏览器的
hashchange
事件来检测路由变化,因为hash
部分不会被服务器解析,所以无需服务器支持。 - 使用方法和
BrowserRouter
一致,适合静态部署或后端不支持history
路由的场景
<Routes>
和<Route>
<Routes>
:包裹所有路由规则<Route>
:定义单个路由,通过path
属性指定URL
路径、element
属性/component
属性指定要渲染的组件
import { Routes, Route } from 'react-router-dom'
function App() {return (<Routes><Route path="/" element={<Home />} /></Routes>);
}
<Link>
- 用于应用内导航,替代
<a>
标签实现导航,生成一个不会导致页面重新加载的链接,避免页面刷新
import { Link } from 'react-router-dom'
function Navbar() {return (<nav><Link to="/" >Home</Link></nav>);
}
<Navigate>
- 用于编程式导航或重定向,例如:当用户访问某个路径时,可以自动重定向到另一个路径
<Route path="/old-path" element={<Navigate to="/new-path" />} />
动态路由
- 通过在路由
path
中使用冒号:参数名
定义参数
import { Route, Routes } from 'react-router-dom'
import User from './User'
<Routes>// 这样 /user/123、/user/abc都会匹配该路由<Route path="/user/:id" element={<User />} />
</Routes>
- 使用
*
通配符匹配任意路径
import { Route, Routes } from 'react-router-dom'
import User from './User'
<Routes>// 这样 /user/xxx/yyy都会匹配该路由<Route path="/user/*" element={<User />} />
</Routes>
获取URL参数
: 通过useParams
获取动态路径参数
import { useParams } from 'react-router-dom'
function User(){const { id } = useParams()return <div>用户ID:{id}</div>
}
获取查询参数
:通过useSearchParams
获取和修改查询参数
import { useSearchParams} from 'react-router-dom'
function SearchPage(){const [searchParams, setSearchParams] = useSearchParams();const keyword = searchParams.get("q"); // 例如 /search?q=reactreturn (<inputvalue={keyword || ""}onChange={(e) => setSearchParams({ q: e.target.value })}/>);
}
嵌套路由
- 在父路由中定义子路由,用
<Outlet>
指定子路由渲染位置
// 父组件---使用 <Outlet> 指定子组件的位置:
function Dashboard(){return (<div><h1>Dashboard</h1>{/* 子路由内容在此渲染 */}<Outlet /> </div>)
}// 通过 <Route> 的嵌套结构实现:
<Route path="/dashboard" element={<Dashboard />}><Route path="stats" element={<Stats />} /><Route path="settings" element={<Settings />} />
</Route>
编程试导航
- 使用
useNavigate
钩子进行跳转
import { useNavigate } from "react-router-dom";
function LoginButton() {const navigate = useNavigate();return (<button onClick={() => {// 跳转到指定路径navigate("/dashboard");// 替换历史记录(无后退)navigate("/dashboard", { replace: true });// 带状态传递navigate("/dashboard", { state: { from: "login" } });}}>Login</button>);
}
路由懒加载(代码分割)
- 使用
React.lazy
和Suspense
优化性能
import React, { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'const Home = lazy(() => import('./home.jsx'))
function App(){return (// fallback属性可以自定义加载时的占位内容(如loading动画)<Suspense fallback={<div>加载中。。。</div>}><Routes><Route path='/' element={<Home />}></Route></Routes></Suspense>)
}
高阶组件实现权限控制
- 高阶组件是一种用于复用组件逻辑的高级技术;采用函数接收组件,返回新组件的模式。
function PrivateRoute({children}){consr isAdmin = checkAuth()return isAdmin ? children : <Navigate to='/login' />
}<Route path='/admin' element={<PrivateRoute><Home />
</PrivateRoute>} />
数据加载(v6.4+)
- 使用
loader
和useLoaderData
在路由加载时预取数据
// 定义路由时配置loader
const router = createBrowserRouter([{path: '/user/:userId',element: <User />loader: async ({ params }) => {// 根据URL传递的数据进行接口请求const res = await fetch(`/api/users/${params.userId}`)return res.json()}}
])// 组件中获取数据
import { useLoaderData } from 'react-router-dom'
function User(){// 直接获取 loader 返回的数据const userData = useLoaderData(); return <div>{userData.name}</div>;
}
路由配置简单demo
- 在
src
目录下创建一个router
文件夹管理路由列表
// 用于编程式导航 重定向
import { Navigate } from 'react-router-dom'
// 高阶组件实现权限控制
import AuthRoute from '@/components/AuthRoute'
// 界面排版组件
import Layout from '@/pages/Layout'
import Admin from '@/pages/Admin'
import Login from '@/pages/Login'export const routesList = [{path: '/',element: <Navigate to="/home" />},{path: '/login',element: <Login />},{path: '/admin',element: <Admin />children: [{ { path: 'optical', element: <AuthRoute ><OpticalManage /></AuthRoute> }, }]},
]
- 在
App.tsx
进行路由配置
interface PageRoute{path: string,element: React.ReactNode,children?: PageRoute[]
}// 使用递归实现 Route 的渲染
function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => (<Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>))
}
function App() {const loading = useSelector<RootState, boolean>(state => state.head.loading)return (<div className="app-view">{loading && <Loading />}<Routes>{ renderRoutes(routesList) }</Routes></div>)
}export default App
常见坑
箭头函数体
用{}
时,必须显示写return
function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => {return <Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>});
}
- 用
()
时,直接返回表达式
function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => (<Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>))
}
相关文章:
React学习———React Router
React Router React Router 是 React 应用中用于管理路由的流行库,它允许你在单页应用(SPA)中实现导航和页面切换而无需重新加载页面。 安装 npm install react-router-dom核心组件 <BrowserRouter> 使用HTML5的历史记录API&#…...
【前端】[vue3] [uni-app]使用 vantUI 框架
npm 安装: npm i vant/weapp -S --productionmain.js 中挂载 App.vue 引入 vantUI 样式 完成:...
upload-labs通关笔记-第8关 文件上传之点绕过
目录 一、点绕过原理 二、deldot()函数 三、源码分析 四、渗透实战 1、构建脚本test8.php 2、打开靶场 3、bp开启拦截 4、点击上传 5、bp拦截 6、后缀名增加点 7、发包并获取脚本地址 8、访问脚本 本文通过《upload-labs靶场通关笔记系列》来进行upload-labs靶场的渗…...
XML简要介绍
实际上现在的Java Web项目中更多的是基于springboot开发的,所以很少再使用xml去配置项目。所以我们的目的就是尽可能快速的去了解如何读懂和使用xml文件,对于DTD,XMLSchema这类约束的学习可以放松,主要是确保自己知道这里面的大致…...
我设计的一个安全的 web 系统用户密码管理流程
作为一名有多年经验的前端,在刚开始学习web后端的时候,就对如何设计一个安全的 web 系统用户密码管理流程有很多疑问。之前自己也实践过几种方法,但一直觉得不是十分安全。 我们知道,用户在注册或登录界面填写的密码是明文的&…...
事件驱动架构:从传统服务到实时响应的IT新风潮
文章目录 事件驱动架构的本质:从请求到事件的范式转变在EDA中: 事件驱动架构的演进:从消息队列到云原生标配核心技术:事件驱动架构的基石与工具链1. 消息队列:事件传递的枢纽2. 消费者:异步处理3. 事件总线…...
YOLOv11改进 | Neck篇 | 轻量化跨尺度跨通道融合颈部CCFM助力YOLOv11有效涨点
YOLOv11改进 | Neck篇 | 轻量化跨尺度跨通道融合颈部CCFM助力YOLOv11有效涨点 引言 在目标检测领域,YOLO系列算法因其卓越的速度-精度平衡而广受欢迎。YOLOv11作为该系列的最新演进版本,在Neck部分引入了创新的跨尺度跨通道融合模块(CCFM, Cross-scale…...
Unity:场景管理系统 —— SceneManagement 模块
目录 🎬 什么是 Scene(场景)? Unity 项目中的 Scene 通常负责什么? 🌍 一个 Scene 包含哪些元素? Scene 的切换与管理 📁 如何创建与管理 Scenes? 什么是Scene Man…...
官方 Elasticsearch SQL NLPChina Elasticsearch SQL
官方的可以在kibana 控制台上进行查询: POST /_sql { “query”: “SELECT client_ip, status FROM logs-2024-05 WHERE status 500” } NLPChina Elasticsearch SQL就无法以在kibana 控制台上进行查询,但是可以使用postman接口进行查询:...
Kubernetes 1.28 无 Docker 运行时环境下的容器化构建实践:Kaniko + Jenkins 全链路详解
背景说明 随着 Kubernetes 1.28 正式弃用 Docker 作为默认容器运行时(CRI 规范演进),传统的 docker build 方式已无法直接在集群内运行。Kaniko 作为 Google 开源的容器镜像构建工具,凭借其无需特权容器、兼容 OCI 标准的特性&am…...
【Linux】序列化与反序列化、会话与进程组、守护进程
一.序列化和反序列化 协议其实就是结构化的数据。但是再网络通信中,我们不直接发送结构化的数据给对方。我们一般会将结构化的数据序列化成字符串/字节流,然后通过网络在发送出去。而接收方收到之后,要对收到的字符串/流式数据进行反序列化&…...
Python机器学习笔记(二十五、算法链与管道)
对于许多机器学习算法,特定数据表示非常重要。首先对数据进行缩放,然后手动合并特征,再利用无监督机器学习来学习特征。因此,大多数机器学习应用不仅需要应用单个算法,而且还需要将许多不同的处理步骤和机器学习模型链接在一起。Pipeline类可以用来简化构建变换和模型链的…...
自媒体工作室如何矩阵?自媒体矩阵养号策略
一、自媒体工作室矩阵搭建方法 1.纵向矩阵:在主流平台都开设账号,覆盖不同用户触达场景。 短视频:抖音、快手、视频号(侧重私域沉淀) 2.主账号导流:通过关联账号、评论区跳转链接实现流量互通 本地生活…...
Pywinauto:轻松实现Windows桌面自动化实战
你是否厌倦了每天重复点击软件界面的枯燥操作?是否希望能像自动化网页那样,轻松控制桌面程序?在自动化测试逐渐扩展到客户端桌面的今天,你还不知道 pywinauto,就真的落后了! 手动测试Windows桌面应用&…...
告别传统的防抖机制,提交按钮的新时代来临
目录 背景 目标 核心代码 样式定义:让图标居中、响应父级颜色 SVG 图标:轻量、无依赖的 loading 图标 指令注册:全局注册 v-bLoading DOM 操作:添加与清除 loading 图标 1. 添加 loading 图标 2. 清除 loading 图标 动画…...
【Linux】Linux安装并配置MongoDB
目录 1.添加仓库 2.安装 MongoDB 包 3.启动 MongoDB 服务 4. 验证安装 5.配置 5.1.进入无认证模式 5.2.1创建用户 5.2.2.开启认证 5.2.3重启 5.2.4.登录 6.端口变更 7.卸载 7.1.停止 MongoDB 服务 7.2.禁用 MongoDB 开机自启动 7.3.卸载 MongoDB 包 7.4.删除数…...
PT2031K单触控单输出触摸IC
1.产品概述 ● PT2031K是一款电容式触摸控制ASIC,支持单通道触摸输入和单路同步开关输出。适用于雾化器、车载用品、电子玩具、消费类电子产品等领域,具有低功耗、高抗干扰、宽工作电压范围的突出优势。 2.主要特性 ● 工作电压范围:2.4~5.5…...
MySQL 与 FastAPI 交互教程
目录 1. 使用 Docker 启动 MySQL2. 创建 FastAPI 应用安装必要的依赖创建项目结构创建数据库连接模块创建数据模型创建 Pydantic 模型(用于请求和响应)创建主应用 3. 运行和测试应用启动应用访问 API 文档 4. 测试 API 端点创建用户获取所有用户获取特定…...
分布式 ID 生成的五种方法:优缺点与适用场景
0.简介 在分布式系统中,生成全局唯一的id是一个常见的需求。由于分布式系统的特性(多节点,网络分区,时钟不同步等),传统的单机ID生成方式不再适用,所以一些分布式生成方式应运而生,…...
ES(Elasticsearch)的应用与代码示例
Elasticsearch应用与代码示例技术文章大纲 一、引言 Elasticsearch在现代化应用中的核心作用典型应用场景分析(日志分析/全文检索/数据聚合) 二、环境准备(前提条件) Elasticsearch 8.x集群部署要点IK中文分词插件配置指南Ingest Attachment插件安装…...
MinIO 开源的分布式文件服务器
如下是java代码调用MinIO的SDK实现文件的上传,并获取url <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.9.3</version> <!-- 你可以选择4.8.1或更高版本 --></dependenc…...
蓝牙AVRCP协议概述
AVRCP(Audio/Video Remote Control Profile)定义了蓝牙设备和 audio/video 控制功能通信的特 点和过程,另用于远程控制音视频设备,底层传输基于 AVCTP 传输协议。该 Profile 定义了AV/C 数字命令控制集。命令和信息通过 AVCTP(Audio/Video Control Trans…...
【全网首发】解决coze工作流批量上传excel数据文档数据重复的问题
注意:目前方法将基于前一章批量数据库导入的修改!!!!请先阅读上篇文章的操作。抄袭注明来源 背景 上一节说的方法可以批量导入文件到数据库,但是无法解决已经上传的条目更新问题。简单来说,不…...
Hue面试内容整理-Hue 架构与前后端通信
Cloudera Hue 是一个基于 Web 的 SQL 助手,旨在为数据分析师和工程师提供统一的界面,以便与 Hadoop 生态系统中的各个组件(如 Hive、Impala、HDFS 等)进行交互。其架构设计强调前后端的分离与高效通信,确保系统的可扩展性和可维护性。以下是 Hue 架构及其前后端通信机制的…...
【八股战神篇】Java高频基础面试题
1 面向对象编程有哪些特性? 面向对象编程(Object-Oriented Programming,简称 OOP)是一种以对象为核心的编程范式,它通过模拟现实世界中的事物及其关系来组织代码。OOP 具有三大核心特性:封装、继承、多态。…...
matlab建立整车模型,求汽车的平顺性
在MATLAB中建立整车模型评估汽车平顺性,通常采用多自由度振动模型。以下是基于四分之一车模型的详细步骤和代码示例,可扩展至整车模型。 1. 四分之一车模型(简化版) 模型描述 自由度:2个(车身垂直位移 z2…...
在Linux服务器上部署Jupyter Notebook并实现ssh无密码远程访问
Jupyter notebook版本7.4.2(这个版本AI提示我Jupyter7(底层是 jupyter_server 2.x) 服务器开启服务 安装Jupyter notebook 7.4.2成功后,终端输入 jupyter notebook --generate-config 这将在 ~/.jupyter/ 目录下生成 jupyter_…...
C#数组与集合
🧠 一、数组(Array) 1. 定义和初始化数组 // 定义并初始化数组 int[] numbers new int[5]; // 默认值为 0// 声明并赋值 string[] names { "Tom", "Jerry", "Bob" };// 使用 new 初始化 double[] scores …...
服务器内部可以访问外部网络,docker内部无法访问外部网络,只能docker内部访问
要通过 iptables 将容器中的特定端口请求转发到特定服务器,你需要设置 DNAT(目标地址转换)规则。以下是详细步骤: 假设场景 容器端口: 8080(容器内服务监听的端口)目标服务器: 192.168.1.100(请…...
mathematics-2024《Graph Convolutional Network for Image Restoration: A Survey》
推荐深蓝学院的《深度神经网络加速:cuDNN 与 TensorRT》,课程面向就业,细致讲解CUDA运算的理论支撑与实践,学完可以系统化掌握CUDA基础编程知识以及TensorRT实战,并且能够利用GPU开发高性能、高并发的软件系统…...
ssti刷刷刷
[NewStarCTF 公开赛赛道]BabySSTI_One 测试发现过滤关键字,但是特殊符号中括号、双引号、点都能用 可以考虑拼接或者编码,这里使用拼接 ?name{{()["__cla"~"ss__"]}}?name{{()["__cla"~"ss__"]["__ba&…...
Zephyr OS Nordic芯片的Flash 操作
目录 概述 1. 软硬件环境 1.1 软件开发环境 1.2 硬件环境 2 Flash操作库函数 2.1 nRF52832的Flash 2.2 Nordic 特有的 Flash 操作 2.2.1 nrfx_nvmc_bytes_write 函数 2.2.2 nrfx_nvmc_page_erase函数 2.2.3 nrfx_nvmc_write_done_check 函数 3 操作Flash的接口函数…...
傅里叶变换实战:图像去噪与边缘提取
傅里叶变换在图像处理中的应用与实践详解(超详细教程实战代码) 🚀 本文从零开始详解傅里叶变换在图像处理中的应用,手把手教你实现图像去噪与边缘提取!全文配套Python代码,新手也能轻松上手! 一…...
go-中间件的使用
中间件介绍 Gin框架允许开发者在处理请求的过程中加入用户自己的钩子(Hook)函数这个钩子函数就是中间件,中间件适合处理一些公共的业务逻辑比如登录认证,权限校验,数据分页,记录日志,耗时统计 1.定义全局中间件 pac…...
昇腾NPU环境搭建
如果进入服务器输入npu-smi info可以看到npu情况,请直接跳转第三步 STEP1: 服务器安装依赖 sudo yum install -y gcc gcc-c make cmake unzip zlib-devel libffi-devel openssl-devel pciutils net-tools sqlite-devel lapack-devel gcc-gfortran python3-develyu…...
【HTML5学习笔记2】html标签(下)
1表格标签 1.1表格作用 显示数据 1.2基本语法 <table><tr> 一行<td>单元格1</td></tr> </table> 1.3表头单元格标签 表头单元格会加粗并且居中 <table><tr> 一行<th>单元格1</th></tr> </table&g…...
开源轻量级地图解决方案leaflet
Leaflet 地图:开源轻量级地图解决方案 Leaflet 是一个开源的 JavaScript 库,用于在网页中嵌入交互式地图。它以轻量级、灵活性和易用性著称,适用于需要快速集成地图功能的项目。以下是关于 Leaflet 的详细介绍和使用指南。 1. Leaflet 的核心…...
LLM学习笔记(六)线性代数
公式速查表 1. 向量与矩阵:表示、转换与知识存储的基础 向量表示 (Vectors): 语义的载体 在LLM中,向量 x ∈ R d \mathbf{x}\in\mathbb{R}^d x∈Rd 是信息的基本单元,承载着丰富的语义信息: 词嵌入向量 (Word Embeddings)&am…...
Vue 3.0双向数据绑定实现原理
Vue3 的数据双向绑定是通过响应式系统来实现的。相比于 Vue2,Vue3 在响应式系统上做了很多改进,主要使用了 Proxy 对象来替代原来的 Object.defineProperty。本文将介绍 Vue3 数据双向绑定的主要特点和实现方式。 1. 响应式系统 1.1. Proxy对象 Vue3 …...
Quasar组件 Carousel走马灯
通过对比两个q-carousel组件来,了解该组件的属性 官方文档请参阅:Carousel 预览 源代码 <template><div class"q-pa-md"><div class"q-gutter-md"><q-carouselv-model"slide"transition-prev&quo…...
Vue 2.0学习
个人简介 👨💻个人主页: 魔术师 📖学习方向: 主攻前端方向,正逐渐往全栈发展 🚴个人状态: 研发工程师,现效力于政务服务网事业 🇨🇳人生格言&…...
LangFlow技术深度解析:可视化编排LangChain应用的新范式 -(3)组件系统
Component System | langflow-ai/langflow | DeepWiki 组件系统 相关源文件 组件系统是核心基础设施,使 Langflow 能够在工作流中创建、配置和连接模块化构建块。该系统通过为组件提供一致的接口来定义其输入、输出、执行行为以及与其他组件的连接,从…...
【Win32 API】 lstrcmpA()
作用 比较两个字符字符串(比较区分大小写)。 lstrcmp 函数通过从第一个字符开始检查,若相等,则检查下一个,直到找到不相等或到达字符串的末尾。 函数 int lstrcmpA(LPCSTR lpString1, LPCSTR lpString2); 参数 lpStr…...
LabVIEW光谱检测系统
腔衰荡光谱技术(CRDS)凭借高精度和高灵敏度特性,成为微量气体浓度检测的常用方法,而准确获取衰荡时间是该技术应用的关键。基于LabVIEW平台设计腔衰荡信号在线处理系统,实现对衰荡信号的实时采集、平均、拟合、显示和保…...
深入解读WPDRRC信息安全模型:构建中国特色的信息安全防护体系
目录 前言1 WPDRRC模型概述2 模型结构详解2.1 预警(Warning)2.2 保护(Protect)2.3 检测(Detect)2.4 响应(React)2.5 恢复(Restore)2.6 反击(Count…...
uniapp-商城-59-后台 新增商品(属性的选中,进行过滤展示,filter,some,every和map)
前面讲了属性的添加,添加完成后,数据库中已经存在数据了,这时再继续商品的添加时,就可以进行属性的选择了。 在商品添加过程中,属性选择是一个关键步骤。首先,界面需要展示嵌套的属性数据,用户通…...
RDIFramework.NET Web敏捷开发框架 V6.2发布(.NET6+、Framework双引擎)
1、框架介绍 .NET6、Framework双引擎、全网唯一 RDIFramework.NET敏捷开发框架,是我司重磅推出的支持.NET6和.NET Framework双引擎的快速信息化系统开发、整合框架,为企业快速构建企业级的应用提供了强大支持。 依托框架强大的基座,开发人员只…...
JMeter 教程:编写 GET 请求脚本访问百度首页
目录 练习要求: 练习步骤: 效果图: 练习要求: 练习步骤: 效果图:...
JSP 实现二级联动下拉菜单:一次加载,前端动态更新
在Web开发中,二级联动下拉菜单(或多级联动)是一种非常常见的用户交互形式,例如选择省份后动态加载对应的城市列表。本文将详细介绍一种在JSP中实现二级联动的方法:后端一次性将所有联动数据加载到前端,然后通过JavaScript在客户端动态更新二级下拉菜单。这种方法对于数据…...
Room数据库
Room数据库 Room是Android Jetpack组件中的一款SQLite数据库抽象层框架,旨在简化本地数据库操作,提供编译时SQL校验、类型与安全、与LiveData/Flow无缝集成等特性。 1. 什么是Room 定义: Room 是 Android Jetpack 提供的一个 ORMÿ…...