前端React篇之React-Router的实现原理是什么?React-Router的路由有几种模式?

目录

  • React-Router的实现原理是什么?
  • React-Router的路由有几种模式?
    • HashRouter
    • BrowserRouter


React-Router的实现原理是什么?

  1. 基于hash的路由:通过监听浏览器的hashchange事件来感知URL中hash部分的变化。当hash发生变化时,React Router能够根据新的hash值来匹配对应的路由并展示相应的组件。可以直接改变hash值来触发路由变化。

  2. 基于HTML5 History API的路由:通过history.pushState和history.replaceState等方法来改变URL,这样可以在不刷新页面的情况下改变浏览器地址栏的URL。React Router利用这个API来实现页面的路由切换,同时通过监听popstate事件来感知URL的变化并做出相应的路由处理。

React Router利用这两种客户端路由实现思想,结合history库来管理路由状态和历史记录。它维护了一个路由配置表,当URL发生变化时,React Router会根据当前URL匹配对应的路由规则,找到要展示的组件并进行渲染。通过这种方式,React Router实现了前端路由管理,使得单页应用能够实现页面间的无刷新跳转和状态管理。

React-Router的路由有几种模式?

React-Router提供了两种主要的路由模式:HashRouter和BrowserRouter。

  1. HashRouter

    • 使用URL的哈希部分(#)来进行路由,不会导致页面的完全重新加载。
    • URL中的哈希部分后面的内容被认为是路由路径的一部分。
    • 可以通过JavaScript捕获哈希变化事件,实现单页应用的路由切换。
    • 可以设置不同的hashType,如slash、noslash和hashbang,来定义哈希部分的格式。
  2. BrowserRouter

    • 使用HTML5 History API来进行路由,通过history.pushState和history.replaceState改变URL,监听popstate事件感知URL的变化。
    • URL中的路径部分用于路由匹配,更加自然地表示URL路径,但需要服务器端的配置支持。
    • 可以设置basename来定义所有路由的基准URL。
    • 可以通过getUserConfirmation属性设置确认导航的函数,配合Prompt组件使用。

另外,还有MemoryRouter模式,将路由信息保存在内存中,适用于一些特殊场景,如非浏览器环境下的单元测试或服务端渲染。

根据具体需求和应用场景,可以选择合适的路由模式来实现React应用的路由管理。BrowserRouter使用HTML5 History API,更加自然,但需要服务器端支持;HashRouter使用URL的哈希部分,不会导致页面重新加载,适用于简单的单页应用。

这些不同的路由模式可以根据具体的需求和应用场景进行选择和配置。

HashRouter

HashRouter 是 React Router 中用于处理路由的一种方式。它使用 URL 中的哈希部分来作为路由地址(即 # 后面的部分)来控制页面的跳转。通常用于不支持 HTML5 History API 的环境,比如旧版浏览器或者一些特殊的 Webview 环境。

HashRouter 是 React Router 中用于通过 URL 的 hash 部分来控制路由跳转的组件。它的主要参数包括:

  • basename: 与 BrowserRouter 的功能相同,用于为所有位置设置基准 URL。
  • getUserConfirmation: 与 BrowserRouter 功能一样,用于在导航时进行确认提示。
  • hashType: 用于指定 window.location.hash 使用的类型,可以是以下几种:
    • slash: 在 hash 后面跟一个斜杠,例如 #/#/sunshine/lollipops
    • noslash: 在 hash 后面没有斜杠,例如 ##sunshine/lollipops
    • hashbang: 使用 Google 风格的 ajax 可抓取 URL,例如 #!/#!/sunshine/lollipops

这些参数允许你配置 HashRouter 来适应不同的 URL 结构和需求。

HashRouter 就像是一个导航标签,可以帮助你在单页面应用中切换不同的内容页面。它通过 URL 中的哈希部分来识别不同的页面内容,并在用户点击链接或进行其他操作时,帮助程序知道要显示哪个页面。想象你在网站上点击了一个链接,然后页面的内容就会发生变化,就像翻书一样。HashRouter 就是帮助你在网页应用中实现这个链接点击后页面变化的功能。

假设我们有一个简单的网站,里面有首页、产品页面和联系页面。我们希望能够通过点击导航栏上的链接来在这些页面之间进行切换。

import React from 'react';
import { HashRouter, Route, Link } from "react-router-dom";function Home() {return <h2>首页</h2>;
}function Products() {return <h2>产品</h2>;
}function Contact() {return <h2>联系我们</h2>;
}function App() {return (<HashRouter><div><nav><ul><li><Link to="/">首页</Link></li><li><Link to="/products">产品</Link></li><li><Link to="/contact">联系我们</Link></li></ul></nav><Route path="/" exact component={Home} /><Route path="/products" component={Products} /><Route path="/contact" component={Contact} /></div></HashRouter>);
}export default App;
  1. 引入 HashRouterRouteLink 组件。
  2. 创建几个简单的页面组件:HomeProductsContact
  3. App 组件中,使用 HashRouter 包裹整个应用,并设置导航链接以及对应的路由规则。

注意的:

  • 当使用 HashRouter 时,URL 中会出现 #/ 这样的格式,这是正常的,不用担心。
  • 如果你的应用需要更加友好的 URL 格式,并且目标环境支持 HTML5 History API,考虑使用 BrowserRouter

HashRouter 是一种处理路由的方式,它通过 URL 的哈希部分来控制页面的跳转。适合简单的单页面应用,并且易于上手。

BrowserRouter

BrowserRouter 是 React Router 中用于控制路由跳转的组件,它使用 HTML5 提供的 history API 来保持页面 UI 和 URL 的同步。

BrowserRouter 是 React Router 中使用 HTML5 提供的 history API 来控制路由跳转的组件。它的主要属性包括:

  • basename: 用于设置所有路由的基准 URL。正确格式是前面有一个前导斜杠,但不能有尾部斜杠。比如 <BrowserRouter basename="/calendar"> 将使得 <Link to="/today" /> 等同于
    <a href="/calendar/today" />
  • forceRefresh: 如果为 true,在导航的过程中整个页面将会刷新。一般情况下,只有在不支持 HTML5 history API 的浏览器中使用此功能。
  • getUserConfirmation: 用于确认导航的函数,默认使用 window.confirm。可以自定义确认函数,配合 <Prompt> 组件一起使用。
  • keyLength: 用来设置 Location.Key 的长度。

这些属性允许你配置 BrowserRouter 来适应不同的 URL 结构和需求,以及在导航时进行确认提示等操作。

想象你在网站上点击了一个链接,然后页面的内容就会发生变化,但 URL 并不会完全刷新。这种体验就是 BrowserRouter 提供的功能。

假设我们有一个简单的网站,里面有首页、产品页面和联系页面。我们希望能够通过点击导航栏上的链接来在这些页面之间进行切换,而且在切换页面时 URL 也会相应地发生改变。

import React from 'react';
import { BrowserRouter, Route, Link } from "react-router-dom";function Home() {return <h2>首页</h2>;
}function Products() {return <h2>产品</h2>;
}function Contact() {return <h2>联系我们</h2>;
}function App() {return (<BrowserRouter><div><nav><ul><li><Link to="/">首页</Link></li><li><Link to="/products">产品</Link></li><li><Link to="/contact">联系我们</Link></li></ul></nav><Route path="/" exact component={Home} /><Route path="/products" component={Products} /><Route path="/contact" component={Contact} /></div></BrowserRouter>);
}export default App;
  1. 引入 BrowserRouterRouteLink 组件。
  2. 创建几个简单的页面组件:HomeProductsContact
  3. App 组件中,使用 BrowserRouter 包裹整个应用,并设置导航链接以及对应的路由规则。

注意的:

  • 当使用 BrowserRouter 时,URL 不会出现 #,而会更加友好和直观。
  • 如果需要兼容一些不支持 HTML5 history API 的环境,可以考虑使用 HashRouter

BrowserRouter 是一种处理路由的方式,它使用 HTML5 提供的 history API 来控制页面的跳转。适合大多数现代浏览器环境下的单页面应用,并提供更加友好的 URL 格式。

持续学习总结记录中,回顾一下上面的内容:
React Router 的实现原理:它通过监听 URL 的变化,然后渲染相应的组件,从而实现页面之间的切换和跳转。当用户点击链接或执行前进/后退操作时,React Router 感知到 URL 的变化,然后根据匹配的路由规则来决定渲染哪个组件,最终呈现给用户相应的页面内容。这种机制让我们能够创建单页面应用,并且在不同的 URL 地址下展示不同的内容,就好像是在多个页面间进行导航一样。
React Router 有两种主要的路由模式:HashRouter 和 BrowserRouter。HashRouter 使用 URL 中的哈希部分(#)来控制路由,适合不支持 HTML5 history API 的环境;而BrowserRouter 则使用 HTML5 提供的 history API 来控制路由,它提供了更加友好和直观的 URL 格式,适用于大多数现代浏览器环境下的单页面应用。

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

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

相关文章

名字空间和类型增强C++

一、名字空间 关键字&#xff1a;namespace&#xff1b; 作用&#xff1a;一个大项目中多个文件里的函数和变量名容易发生冲突&#xff0c;名字空间用来解决这种冲突 语法&#xff1a; namespace namespace_name {}例如&#xff1a; namespce Sample {int i;float f;void d…

PYTHON 120道题目详解(118-120)

118.解释Python中的迭代器&#xff08;Iterator&#xff09;和可迭代对象&#xff08;Iterable&#xff09;的区别和联系。 在Python中&#xff0c;迭代器&#xff08;Iterator&#xff09;和可迭代对象&#xff08;Iterable&#xff09;是两个非常重要的概念&#xff0c;它们在…

【微服务】nacos注册中心

Nacos注册中心 国内公司一般都推崇阿里巴巴的技术&#xff0c;比如注册中心&#xff0c;SpringCloudAlibaba也推出了一个名为Nacos的注册中心。 1.1.认识和安装Nacos Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud中的一个组件。相比Eureka功能更加丰富&#xff0c;在…

C++ 改造红黑树,封装map和set

C 改造红黑树,封装map和set 一.前言:已经实现好了的红黑树二.简化STL库里面对于map和set的封装1.STL库中红黑树的简化代码2.STL库中set的简化代码3.STL库中map的简化代码4.封装map和set的第一步5.红黑树第一个模板参数的价值6.红黑树节点的定义 三.仿函数1.解除仿函数的误解2.仿…

Android App冷启动耗时优化

Android应用启动过程 Android应用启动过程&#xff0c;主要包含app::onCreate及执行前的Application阶段及Activity::onCreate执行之后的Activity阶段&#xff0c;以及两个阶段之间的间隙handleMessage阶段和最终页面渲染上屏完成前数据加载阶段四个区间组成。 具体来看&#x…

IDEA中配置Tomcat

在IDEA中配置Tomcat 第一步&#xff1a;选择这个方框 第二步&#xff1a;选择号&#xff0c;找到Tomcat Server&#xff08;Local&#xff09; 第三步&#xff1a;将红方框内填完整 第四步&#xff1a;创建artifaces&#xff0c;选择Deployment–>Artia…选择 *.war expl…

嵌入式驱动学习第三周——字符设备驱动关键结构体

前言 linux内核将字符设备抽象成一个具体的数据结构&#xff0c;可以理解为字符设备对象&#xff0c;这篇博客就来讲解一下字符设备驱动的关键结构体。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以…

ArcGis Pro Python工具箱教程 02 工具箱工具集添加

ArcGis Pro Python工具箱教程 02 工具箱工具集添加 经过上一章的教程&#xff0c;pyt工具箱已将可以建立一个模板了&#xff0c;但是所建立的工具都是在一个列表&#xff0c;要进行查找会非常麻烦&#xff0c;所以要采用工具集的分类 官方文档中已经给出了添加工具集的方法&a…

以题为例浅谈SSRF

什么是ssrf SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。 一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xff0c;所以它能够请求到与它相连…

HTML案例-2.标签综合练习

目录 效果 知识点 1.图像标签 2.链接标签 3.锚点定位 4.base标签 源码 页面1 页面2 效果 知识点 1.图像标签 <img src="图像URL" /> 单标签 属性 属性值 描述 src URL 图像的路径 alt 文本

javase day04笔记

第四天课堂笔记 运算符★★★ 算数运算符 数值&#xff1a;相加、求和字符串&#xff1a;拼接表示正号 -相减 /%&#xff1a;求余数&#xff0c;取模/–&#xff1a;自加自减 后置&#xff1a;先自身加1&#xff0c;然后将加1之前的值&#xff0c;再做其他运算m 5 ; n m …

【linux线程(二)】线程互斥与线程同步

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux线程 1. 前言2. 多线程互…

基于大模型和向量数据库的 RAG 示例

1 RAG 介绍 RAG是一种先进的自然语言处理方法&#xff0c;它结合了信息检索和文本生成技术&#xff0c;用于提高问答系统、聊天机器人等应用的性能。 2 RAG 的工作流程 文档加载&#xff08;Document Loading&#xff09; 从各种来源加载大量文档数据。这些文档…

Apache Paimon 使用 Postgres CDC 获取数据

a.依赖准备 flink-connector-postgres-cdc-*.jarb.Synchronizing Tables&#xff08;同步表&#xff09; 在Flink DataStream作业中使用 PostgresSyncTableAction 或直接通过flink run&#xff0c;可以将PostgreSQL中的一个或多个表同步到一个Paimon表中。 <FLINK_HOME&g…

reduce()方法的应用

reduce() 是 JavaScript 数组&#xff08;Array&#xff09;对象的一个方法&#xff0c;它接收一个函数作为累加器&#xff08;accumulator&#xff09;&#xff0c;数组中的每个值&#xff08;从左到右&#xff09;开始缩减&#xff0c;最终为一个值。 reduce() 方法的基本语…

Redis 除了做缓存,还能做什么?

分布式锁&#xff1a;通过 Redis 来做分布式锁是一种比较常见的方式。通常情况下&#xff0c;我们都是基于 Redisson 来实现分布式锁。关于 Redis 实现分布式锁的详细介绍&#xff0c;可以看这篇文章&#xff1a;分布式锁详解open in new window 。限流&#xff1a;一般是通过 …

json-server 安装成功,查看版本直接报错。安装默认版本埋下的一个坑,和node版本不匹配

文章目录 一、作者的错误二、作者安装的过程三、版本问题的解决方式四、安装成功&#xff0c;显示命令不存在的解决思路五、安装失败的解决思路六、json-server运行命令参考文档 一、作者的错误 安装成功 错误原文 file:///C:/Users/ljj/AppData/Roaming/nvm/v14.18.1/node_g…

go语言基础笔记

1.基本类型 1.1. 基本类型 bool int: int8, int16, int32(rune), int64 uint: uint8(byte), uint16, uint32, uint64 float32, float64 string 复数&#xff1a;complex64, complex128 复数有实部和虚部&#xff0c;complex64的实部和虚部为32位&#xff0c;complex128的实部…

Vue首屏优化方案

在Vue项目中&#xff0c;引入到工程中的所有js、css文件&#xff0c;编译时都会被打包进vendor.js&#xff0c;浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多&#xff0c;那么vendor.js文件体积将会相当的大&#xff0c;影响首屏的体验。可以看个例子&#xff1a;…

Unload-labs

function checkFile() {var file document.getElementsByName(upload_file)[0].value;if (file null || file "") {alert("请选择要上传的文件!");return false;}//定义允许上传的文件类型var allow_ext ".jpg|.png|.gif";//提取上传文件的类…