React Router Vs Vue Router
文章目录
- 前言
- ✅ React Router vs Vue Router 对比一览
- 🧩 React Router 的底层原理简述
- ① 路由声明与匹配(基于 JSX)
- ② 历史模式管理
- ③ 响应式状态处理
- ④ 路由渲染机制(Outlet)
- ✅ 总结:原理是否一样?
- 完整示例
- ✅ 示例目标:
- 📦 1. 安装依赖
- 🧩 2. 目录结构
- 🧱 3. 实现组件
- `App.tsx`
- `ProtectedRoute.tsx`
- `DashboardLayout.tsx`
- `Profile.tsx` / `Settings.tsx`
- `Login.tsx`
- `Home.tsx`
- ✅ 效果总结
- 后续:
前言
React 社区主流使用的是 React Router,它和 Vue Router 是功能上非常类似的客户端路由库,但底层实现原理与 Vue Router 在设计理念上有显著差异。
✅ React Router vs Vue Router 对比一览
特性 / 对比项 | Vue Router | React Router |
---|---|---|
配置方式 | 配置式:通过 routes 数组注册 | 声明式:通过 JSX 结构描述嵌套关系 |
路由定义 | createRouter({ routes }) | <Route path="/" element={<Home />}> |
路由嵌套 | 嵌套路由由 children 配置 | JSX 中嵌套 <Route> 实现嵌套路由 |
响应式机制依赖 | Vue 响应式系统 | React 状态系统(useState , useEffect ) |
导航守卫 | beforeEach , beforeRouteEnter | 没有内建守卫,需自定义封装逻辑组件 |
底层历史机制 | 自己封装了一套 History 模块 | 直接使用 history 或 react-router-dom 的 history 包 |
路由渲染组件 | <router-view> | <Outlet> |
🧩 React Router 的底层原理简述
React Router 的核心机制分为:
① 路由声明与匹配(基于 JSX)
- React Router 利用 JSX 定义 Route 树,使用的是声明式 API:
<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} />
</Routes>
Routes
组件内部会解析子Route
节点,构建匹配树并与window.location.pathname
匹配。
② 历史模式管理
- 由
react-router-dom
提供的BrowserRouter
/HashRouter
:
<BrowserRouter> // HTML5 History API
<HashRouter> // Hash 模式
- 内部使用了
history
包(https://github.com/remix-run/history)来封装 URL 操作。
③ 响应式状态处理
React Router 使用自己的 useLocation()
、useNavigate()
、useParams()
来读取当前状态或跳转。
内部用 React Context + useReducer
实现状态追踪和通知刷新。
④ 路由渲染机制(Outlet)
React Router 使用 <Outlet />
实现嵌套路由组件插槽渲染,类似 Vue 的 <router-view>
。
<Route path="settings" element={<SettingsLayout />}><Route path="profile" element={<Profile />} />
</Route>
在 SettingsLayout
组件中使用 <Outlet />
来渲染 Profile
。
✅ 总结:原理是否一样?
相同点 | 不同点 |
---|---|
都使用 history API 或 hash 进行地址管理 | Vue 用配置式路由表;React 用 JSX 声明式结构 |
都支持嵌套路由、动态参数、懒加载、路由组件渲染等 | Vue 内建导航守卫;React 需自行通过组件逻辑封装 |
都有 <router-view> / <Outlet> 类似插槽来决定显示哪个组件 | React 更强调函数式组件和 hooks,Vue 更强调响应式系统和生命周期钩子 |
完整示例
下面给出一个 React Router v6+ 实现导航守卫和嵌套路由的完整示例,可以类比 Vue Router 的 beforeEach
或 meta.requiresAuth
功能。
✅ 示例目标:
- 实现一个登录保护机制:
/dashboard
只能登录后访问。 - 使用嵌套路由:
/dashboard/profile
、/dashboard/settings
。 - 使用
<Outlet />
类似 Vue 的<router-view>
。
📦 1. 安装依赖
npm install react-router-dom
🧩 2. 目录结构
src/
├─ App.tsx
├─ routes/
│ ├─ ProtectedRoute.tsx
│ ├─ DashboardLayout.tsx
│ ├─ Profile.tsx
│ ├─ Settings.tsx
├─ pages/
│ ├─ Login.tsx
│ ├─ Home.tsx
🧱 3. 实现组件
App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import DashboardLayout from './routes/DashboardLayout'
import ProtectedRoute from './routes/ProtectedRoute'
import Profile from './routes/Profile'
import Settings from './routes/Settings'export default function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />} /><Route path="/login" element={<Login />} />{/* 嵌套路由 + 路由守卫 */}<Route element={<ProtectedRoute />}><Route path="/dashboard" element={<DashboardLayout />}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} /></Route></Route></Routes></BrowserRouter>)
}
ProtectedRoute.tsx
import { Navigate, Outlet } from 'react-router-dom'// 假设是全局变量 / 状态管理
const isAuthenticated = () => !!localStorage.getItem('token')export default function ProtectedRoute() {return isAuthenticated() ? <Outlet /> : <Navigate to="/login" />
}
📌 类似于 Vue 的导航守卫 beforeEnter
。
DashboardLayout.tsx
import { Outlet, Link } from 'react-router-dom'export default function DashboardLayout() {return (<div><h2>Dashboard</h2><nav><Link to="profile">Profile</Link> | <Link to="settings">Settings</Link></nav><hr /><Outlet /> {/* 嵌套路由入口 */}</div>)
}
Profile.tsx
/ Settings.tsx
export default function Profile() {return <div>👤 This is your profile.</div>
}export default function Settings() {return <div>⚙️ Here are your settings.</div>
}
Login.tsx
import { useNavigate } from 'react-router-dom'export default function Login() {const navigate = useNavigate()const login = () => {localStorage.setItem('token', 'dummy')navigate('/dashboard')}return <button onClick={login}>Login</button>
}
Home.tsx
import { Link } from 'react-router-dom'export default function Home() {return (<div><h1>🏠 Home Page</h1><Link to="/dashboard">Go to Dashboard</Link></div>)
}
✅ 效果总结
- 未登录访问
/dashboard/profile
会跳转/login
。 - 登录后会自动导航回 dashboard。
- 嵌套路由使用
<Outlet />
插槽进行渲染,结构清晰。
后续:
- React Router + Zustand 权限管理系统(支持登录、角色验证、自动跳转)
- token 校验 + 自动续签 + 刷新记住身份 的版本
相关文章:
React Router Vs Vue Router
文章目录 前言✅ React Router vs Vue Router 对比一览🧩 React Router 的底层原理简述① 路由声明与匹配(基于 JSX)② 历史模式管理③ 响应式状态处理④ 路由渲染机制(Outlet) ✅ 总结:原理是否一样&#…...
Spark中RDD算子的介绍
引言 在大数据处理领域,Apache Spark凭借其高效性和灵活性备受青睐。而弹性分布式数据集(Resilient Distributed Datasets,简称RDD)则是Spark的核心数据结构。RDD算子作为操作RDD的关键工具,掌握它们对于充分发挥Spar…...
Vivo 手机官网交互效果实现解析
在现代网页设计中,流畅的滚动交互和精美的视觉效果是提升用户体验的关键。本文将深入解析 Vivo 手机官网 Demo 中的一个核心交互效果 —— 基于滚轮滚动的内容展示系统。这个系统允许用户通过滚动鼠标滚轮来浏览不同的手机镜头配置信息,同时伴随平滑的过…...
powershell批处理——io校验
powershell批处理——io校验 在刷题时,时常回想,OJ平台是如何校验竞赛队员提交的代码的,OJ平台并不看代码,而是使用“黑盒测试”,用测试数据来验证。对于每题,都事先设定了很多组输入数据(data…...
AI——认知建模工具:ACT-R
ACT-R(Adaptive Control of Thought—Rational)是一种用于模拟人类认知过程的计算架构,广泛应用于心理学、认知科学和人工智能研究。它通过模块化的方式模拟记忆、注意力、学习、决策等认知机制。以下是ACT-R的核心概念、安装方法、基础语法及…...
Docker 容器镜像环境的依赖导出
#工作记录 如果我们想获取 Docker 容器中已有镜像的所有的依赖包信息,包括其他可能的系统依赖,用于在其他环境(如 WSL 或 Windows)中重新搭建相同的运行环境。 以下是完整的步骤: 1. 导出 Python 依赖(r…...
[ubuntu]fatal error: Eigen/Core: No such file or directory
确认是否安装了eigen3sudo apt-get install libeigen3-dev 解决 fatal error: Eigen/Core: No such file or directory 如果已经安装,但当调用 eigen 库时,报错:fatal error: Eigen/Core: No such file or directory 这是因为 eigen 库默认…...
《硬件视界》专栏介绍(持续更新ing)
名人说:路漫漫其修远兮,吾将上下而求索。 —— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 ✨ 专栏简介📚 当前专栏目录(持续更新中)&a…...
TypeScript类型挑战-刷题
TypeScript类型挑战 vscode刷题 vscode 插件 热身题 // Test Cases import type { Equal, Expect, NotAny } from "./test-utils";type cases [Expect<NotAny<HelloWorld>>, Expect<Equal<HelloWorld, string>>];// Your Code Here …...
Java后端开发day43--IO流(三)--缓冲流转换流序列化流
(以下内容全部来自上述课程) 缓冲流 1. 字节缓冲流 原理:底层自带了长度为8192的缓冲区提高性能 1.1拷贝文件(一次读写一个字节) //1.创建缓冲流的对象 BufferedInputStream bis new BufferedInputStream(new Fi…...
Nginx性能调优与深度监控
一:Nginx性能调优 1.更改进程数和连接数 (1)进程数 在高并发环境中,需要启动更多的Nginx进程以保证快速响应,用以处理用户的请求,避免造成阻塞。使用psaux命令查看Nginx运行进程的个数。从命令执行结果可…...
【LeetCode】高频 SQL 50题 题解
目录 查询 可回收且低脂的产品 寻找用户推荐人 大的国家 文章浏览 I 无效的推文 连接 使用唯一标识码替换员工ID 产品销售分析 I 进店却未进行过交易的顾客 上升的温度 每台机器的进程平均运行时间 员工奖金 学生们参加各科测试的次数 至少有5名直接下属的经理 …...
基于Qt的app开发第六天
写在前面 博主是一个大一下的计科生,现在正在做C面向对象程序设计的课程设计,具体功能可以看本专栏的第一篇博客。 目前的进度是:配好MySQL驱动->设计完界面->实现各个界面的切换 这一篇博主要初步实现待办板块的功能,即新建…...
剑指大规模 AI 可观测,阿里云 Prometheus 2.0 应运而生
作者:曾庆国(悦达) Prometheus 大家应该非常熟悉,正文开始前,让我们一起来回顾开源 Prometheus 项目的发展史。Prometheus 最初由 SoundCloud 的工程师 Bjrn Rabehl 和 Julius Volz 于 2012 年开发。当时,…...
阿里云2核2g安装nexus
阿里云2核2g安装nexus # 安装 JDK 1.8 sudo yum install -y java-1.8.0-openjdk-devel# 验证安装 java -version创建运行用户 cd /opt sudo wget https://download.sonatype.com/nexus/3/latest-unix.tar.gz sudo tar -xzf latest-unix.tar.gz sudo mv nexus-3* nexussudo us…...
eFish-SBC-RK3576工控板USB HOST接口USB3.0测试操作指南
本小节特指丝印号为J8的USB HOST接口,本开发板只有两个USB3.0接口,无USB2.0 这里接U盘测试。 在不接入任何USB外设的情况下,先查看/dev目录下是否存在/dev/sd*设备,执行命令: $ ls /dev/sd* 如下图所示: …...
嵌入式软件学习指南:从入门到进阶
嵌入式软件是物联网(IoT)、汽车电子、智能家居等领域的核心技术之一。它涉及硬件与软件的紧密结合,要求开发者不仅会写代码,还要理解底层硬件的工作原理。本文将带你系统了解嵌入式软件的学习路径、核心知识体系及实用资源推荐。 …...
【论文阅读】Adversarial Training Towards Robust Multimedia Recommender System
Adversarial Training Towards Robust Multimedia Recommender System 题目翻译:面向鲁棒多媒体推荐系统的对抗训练 论文链接:点这里 标签:多媒体推荐、对抗训练、推荐系统鲁棒性 摘要 随着多媒体内容在网络上的普及,迫切需要开…...
转换算子和行动算子的区别
转换算子会从一个已经存在的数据集 (RDD)中生成一个新的数据集 (RDD),比如map就是一个转换算子,它通过映射关系从一个RDD生成了一个新的RDD。 行动算子 (actions): 行动算子在进行数据集计算后会给driver程序返回一个值。 转换算子和行动算子最大的区别࿱…...
Selenium的driver.get_url 和 手动输入网址, 并点击的操作,有什么不同?
我在搞爬取的时候,发现有些网站直接用driver.get(url) 跳转到目标特定的网址的时候,会被强制跳转到其他的网址上,但是如果是自己手动,在网址栏那里输入网址,并点回车,却能完成跳转。 这是在使用 Selenium …...
【强化学习】强化学习算法 - 多臂老虎机问题
1、环境/问题介绍 概述:多臂老虎机问题是指:智能体在有限的试验回合 𝑇 内,从 𝐾 台具有未知奖赏分布的“老虎机”中反复选择一个臂(即拉杆),每次拉杆后获得随机奖励,目…...
Spring MVC Controller 方法的返回类型有哪些?
Spring MVC Controller 方法的返回类型非常灵活,可以根据不同的需求返回多种类型的值。Spring MVC 会根据返回值的类型和相关的注解来决定如何处理响应。 以下是一些常见的 Controller 方法返回类型: String: 最常见的类型之一,用于返回逻辑…...
Diamond iO:实用 iO 的第一缕曙光
1. 引言 当前以太坊基金会PSE的Machina iO团队宣布,其已经成功实现了 Diamond iO: A Straightforward Construction of Indistinguishability Obfuscation from Lattices —— 其在2025年2月提出的、结构简单的不可区分混淆(iO)构造…...
Spring MVC中跨域问题处理
在Spring MVC中处理跨域问题可以通过以下几种方式实现,确保前后端能够正常通信: 方法一:使用 CrossOrigin 注解 适用于局部控制跨域配置,直接在Controller或方法上添加注解。 示例代码: RestController CrossOrigin…...
Python爬虫(20)Python爬虫数据存储技巧:二进制格式(Pickle/Parquet)性能优化实战
目录 背景介绍一、二进制存储的核心优势二、Python Pickle:轻量级对象序列化1. 基本介绍2. 代码示例3. 性能与局限性 三、Apache Parquet:列式存储的工业级方案1. 基本介绍2. 代码示例(使用PyArrow库)3. 核心优势 四、性能对比与选…...
MCP系列(一)什么是MCP?
一、MCP 是什么:从 USB-C 到 AI 的「万能接口」哲学 MCP(Model Context Protocol,模型上下文协议) 是Anthropic于2024年11月推出的AI跨系统交互标准,专为解决LLM(大语言模型)的「数字失语症」—…...
使用Java NIO 实现一个socket通信框架
使用Java NIO(非阻塞I/O)实现一个Socket通信框架,可以让你构建高性能的网络应用。NIO提供了Channel、Buffer和Selector等核心组件,支持非阻塞模式下的网络编程。下面是一个简单的例子,展示了如何使用Java NIO创建一个基本的服务器端和客户端进行Socket通信。 1.服务器端 …...
Web前端技术栈:从入门到进阶都需要学什么内容
概述 Web前端技术栈:从入门到进阶都需要学什么内容。 1. jQuery:经典高效的DOM操作利器 作为早期前端开发的“瑞士军刀”,jQuery通过简洁的语法和链式调用大幅简化了DOM操作与事件处理。其核心模块如选择器引擎、动画效果和Ajax交互至今仍值…...
Kepware 连接Modbus TCP/IP
Modbus TCP modbus tcp 是modbus协议的一个变种,基于TCP/IP协议栈在以太网上进行通信。Modbus TCP采用客户端-服务器(Master-Slave)的通信模型。客户端发起请求,服务器响应请求。一个网络中可以有多个客户端和服务器,…...
PyCharm连接WSL2搭建的Python开发环境
目录 一、开启WSL2服务 二、安装Ubuntu 三、安装Anaconda 四、构建Tensorflow_gpu环境 五、PyCharm连接到WSL2环境 使用 PyCharm 连接 WSL2 搭建 Python 开发环境的主要目的是结合 Windows 的易用性和 Linux 的开发优势,提升开发效率和体验。以下是具体原因和优…...
JVM中类加载过程是什么?
引言 在Java程序运行过程中,类的加载是至关重要的环节,它直接关系到程序的执行效率和安全性。类加载不仅仅是简单地将.class文件读取到内存中,而是经历了加载、连接(包含验证、准备和解析)以及初始化等多个复杂步骤&a…...
JVM中对象的存储
引言 在 Java 虚拟机中,对象的内存布局是一个非常基础且重要的概念。每个 Java 对象在内存中都由三个主要部分构成:对象头(Header)、实例数据(Instance Data)和对齐填充(Padding)。…...
精益数据分析(48/126):UGC商业模式的指标剖析与运营策略
精益数据分析(48/126):UGC商业模式的指标剖析与运营策略 在创业和数据分析的学习之旅中,探索不同商业模式的运营奥秘是我们不断前行的动力。今天,依旧怀揣着和大家共同进步的期望,深入研读《精益数据分析》…...
SpringBoot优雅参数检查
SpringBoot优雅参数检查 在 Spring Boot 中,参数验证通常基于 JSR-380(Bean Validation 2.0)规范,结合 javax.validation(或 jakarta.validation)和 Hibernate Validator 实现。以下是常用的验证注解及其意…...
(九)PMSM驱动控制学习---分流电阻采样及重构
在电机控制当中,无论是我们的控制或者电机工作情况的检测,都十分依赖于电机三相电流的值, 所以相电流采样再在FOC控制中是一个特别关键的环节。 在前几篇中我们介绍了逆变电路的相关内容,所以在此基础上我们接着说道电流采样。目前…...
医疗人工智能大模型中的关键能力:【中期训练】mid-training
引言 医疗人工智能(AI)领域的快速发展正在重塑医疗保健的未来。从辅助诊断到个性化治疗方案,AI技术已经显示出改变医疗实践的巨大潜力。然而,在将AI技术应用于医疗场景时,我们面临着独特的挑战。医疗数据的复杂性、决策的高风险性以及对可解释性的严格要求,都使得医疗AI…...
Unity垃圾回收(GC)
1.GC的作用:定期释放不再使用的内存空间。 注:C不支持GC,需要手动管理内存,使用new()申请内存空间,使用完后通过delete()释放掉,但可能出现忘记释放或者指针…...
什么是跨域,如何解决跨域问题
什么是跨域,如何解决跨域问题 一、什么是跨域 跨域是指浏览器出于安全考虑,限制网页脚本访问不同源(协议、域名、端口)的资源。两个URL的协议、域名或端口任意一个不相同时,就属于不同源,浏览器会阻止脚本…...
JVM的双亲委派模型
引言 Java类加载机制中的双亲委派模型通过层层委托保证了核心类加载器与应用类加载器之间的职责分离和加载安全性,但其单向的委托关系也带来了一些局限性。尤其是在核心类库需要访问或实例化由应用类加载器加载的类时,双亲委派模型无法满足需求…...
ARCGIS PRO DSK 选择坐标系控件(CoordinateSystemsControl )的调用
在WPF窗体上使用 xml:加入空间命名引用 xmlns:mapping"clr-namespace:ArcGIS.Desktop.Mapping.Controls;assemblyArcGIS.Desktop.Mapping" 在控件区域加入: <mapping:CoordinateSystemsControl x:Name"CoordinateSystemsControl&q…...
一个电平转换电路导致MCU/FPGA通讯波形失真的原因分析
文章目录 前言一、问题描述二、原因分析三、 仿真分析四、 尝试的解决方案总结前言 一、问题描述 一个电平转换电路,800kHz的通讯速率上不去,波形失真,需要分析具体原因。输出波形如下,1码(占空比75%)低于5V,0码(占空比25%)低于4V。,严重失真。 电平转换电路很简单,M…...
不同OS版本中的同一yum源yum list差异排查思路
问题描述: qemu-guest-agent二进制rpm包的yum仓库源和yum源仓库配置文件path_to_yum_conf, 通过yum list --available -c path_to_yum_conf 查询时,不同的OS版本出现了不同的结果 anolis-8无法识别 centos8可以识别 说明: 1 测试…...
Android Studio开发安卓app 设置开机自启
Android Studio开发安卓app 设置开机自启 AndroidManifest.xml增加配置 增加的配置已标记 AndroidManifest.xml完整配置 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/androi…...
全文索引数据库Elasticsearch底层Lucene
Lucene 全文检索的心,天才的想法。 一个高效的,可扩展的,全文检索库。全部用 Java 实现,无须配置。仅支持纯文本文件的索引(Indexing)和搜索(Search)。不负责由其他格式的文件抽取纯文本文件,或从网络中抓取文件的过程…...
互联网大厂Java求职面试:分布式系统中向量数据库与AI应用的融合探索
互联网大厂Java求职面试:分布式系统中向量数据库与AI应用的融合探索 面试开场:技术总监与郑薪苦的“较量” 技术总监(以下简称T):郑薪苦先生,请简单介绍一下你在分布式系统设计方面的经验。 郑薪苦&…...
游戏引擎学习第262天:绘制多帧性能分析图
回顾并为今天设定阶段 事情开始录制了,大家好,欢迎来到游戏直播节目。我们正在直播完成游戏的开发工作,目前我们正在做性能分析器,它现在已经非常酷了。我们只是在清理一些界面问题,但它能做的事情真的很厉害。我觉得…...
1、RocketMQ 核心架构拆解
1. 为什么要使用消息队列? 消息队列(MQ)是分布式系统中不可或缺的中间件,主要解决系统间的解耦、异步和削峰填谷问题。 解耦:生产者和消费者通过消息队列通信,彼此无需直接依赖,极大提升系统灵…...
探索 C++ 语言标准演进:从 C++23 到 C++26 的飞跃
引言 C 作为一门历史悠久且广泛应用的编程语言,其每一次标准的演进都备受开发者关注。从早期的 C98 到如今的 C23,再到令人期待的 C26,每一个版本都为开发者带来了新的特性和改进,推动着软件开发的不断进步。本文将深入探讨 C23 …...
ROBOVERSE:面向可扩展和可泛化机器人学习的统一平台、数据集和基准
25年4月来自UC Berkeley、北大、USC、UMich、UIUC、Stanford、CMU、UCLA 和 北京通用 AI 研究院(BIGAI)的论文“ROBOVERSE: Towards a Unified Platform, Dataset and Benchmark for Scalable and Generalizable Robot Learning”。 数据扩展和标准化评…...
【Bootstrap V4系列】学习入门教程之 组件-轮播(Carousel)高级用法
【Bootstrap V4系列】学习入门教程之 组件-轮播(Carousel)高级用法 轮播(Carousel)高级用法2.5 Crossfade (淡入淡出)2.6 Individual .carousel-item interval (单个轮播项目间隔)2.…...