(三)React路由

news/2024/2/28 18:34:03

1. 相关理解

1.1 SPA的理解

(1)单页Web应用(single page web application, SPA)
(2)整个应用只有一个完整的页面
(3)点击页面中的链接不会刷新页面,只会做页面的局部更新
(4)数据都需要通过ajax请求获取,并在前端异步展现

1.2 路由的理解

1.2.1 什么是路由

(1)一个路由就是一个映射关系(key : value)
(2)key为路径,value可能是function或component

1.2.2 路由分类
  • 后端路由:

    • 理解:vlaue是function,用来处理客户端提交的请求。
    • 注册路由:router.get(path, function(req, res))
    • 工作过程:当node接收到一个请求时,根据请求路径找到匹配的路由,调用路由中的函数来处理请求,返回响应数据
  • 前端路由:

    • 浏览器端路由,value是component,用于展示页面的内容。
    • 注册路由:<Router paht="/test" component={Test}>
    • 工作过程:当浏览器的path变为/test时,当前路由组件就会变为Test组件
1.2.3 前端路由的基石 – bom history

路由的实现依赖bom对象的history属性

1.3 react-router-dom 的理解

(1)react的一个插件库
(2)专门用来实现一个SPA的应用
(3)鲫鱼react的项目基本都会用此库

2. react-router-dom相关API

官网:https://react-router.docschina.org/

2.1 内置组件

  1. <BrowserRouter>
  2. <HashRouter>
  3. <Router>
  4. <Redirect>
  5. <Link>
  6. <NavLink>
  7. <Switch>

2.2 其他

  1. history对象
  2. mactch对象
  3. withRouter对象

React Router 6 – 最新版

React Router以三个不同的包发布在npm上,他们分别为:
(1)react-router:路由核心库,提供了很多:组件、钩子
(2)react-router-dom:包含react-router所有内容,并添加一些专门用于DOM的组件,例如\<BrowserRouter>等
(3)react-router-native:包括react-router所有内容,并添加一些专门用于ReactNative的API,例如<NativeRouter>等

与React Router 5.x版本相比,改变了什么?
(1)内置组件的变化:移除<Switch/>,新增<Routes/>
(2)语法的变化:component={about}变为element={<about/>}
(3)新增多个hook:useParams、useNavigate、useMatch等
(4)官方明确推荐函数式组件了!!


http://www.ppmy.cn/news/1025766.html

相关文章

从源代码编译构建Hive3.1.3

从源代码编译构建Hive3.1.3 编译说明编译Hive3.1.3更改Maven配置下载源码修改项目pom.xml修改hive源码修改说明修改standalone-metastore模块修改ql模块修改spark-client模块修改druid-handler模块修改llap-server模块修改llap-tez模块修改llap-common模块 编译打包异常集合异常…

【前端 | CSS】滚动到底部加载,滚动监听、懒加载

背景 在日常开发过程中&#xff0c;我们会遇到图片懒加载的功能&#xff0c;基本原理是&#xff0c;滚动条滚动到底部后再次获取数据进行渲染。 那怎么判断滚动条是否滚动到底部呢&#xff1f;滚动条滚动到底部触发时间的时机和方法又该怎样定义&#xff1f; 针对以上问题我…

JVM如何调优

一、JVM内存模型及垃圾收集算法 1.根据Java虚拟机规范&#xff0c;JVM将内存划分为&#xff1a; New&#xff08;年轻代&#xff09; Tenured&#xff08;年老代&#xff09; 永久代&#xff08;Perm&#xff09; 其中New和Tenured属于堆内存&#xff0c;堆内存会从JVM启动参…

Python3 安装、环境变量配置、PyCharm新建Python项目

一、安装包下载 Pyhton官网下载>>最新稳定版的安装包&#xff1a; 找到合适的版本进行下载&#xff1a; 如果下载较慢&#xff0c;此处提供一个3.10.11的稳定版本的安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/16GnWjkGFuSfWfaI9UVX8qA?pwd4u5o 提取…

(WWW2023)论文阅读-Detecting Social Media Manipulation in Low-ResourceLanguages

论文链接&#xff1a;https://arxiv.org/pdf/2011.05367.pdf 摘要 社交媒体被故意用于恶意目的&#xff0c;包括政治操纵和虚假信息。大多数研究都集中在高资源语言上。然而&#xff0c;恶意行为者会跨国家/地区和语言共享内容&#xff0c;包括资源匮乏的语言。 在这里&#xf…

一文读懂Python生成器和迭代器

在python中&#xff0c;我们经常会遇到需要对一系列的元素进行遍历或处理的情况&#xff0c;例如对列表中的每个元素进行求和或排序&#xff0c;或者对文件中的每一行进行读取或写入。为了实现这样的功能&#xff0c;我们通常会使用for循环或while循环来逐个获取元素&#xff0…

Grafana展示k8s中pod的jvm监控面板/actuator/prometheus

场景 为保障java服务正常运行&#xff0c;对服务的jvm进行监控&#xff0c;通过使用actuator组件监控jvm情况&#xff0c;使用prometheus对数据进行采集&#xff0c;并在Grafana展现。 基于k8s场景 prometheus数据收集 配置service的lable&#xff0c;便于prometheus使用labl…

前端笔试题1

HTML/CSS 题1&#xff1a; 1&#xff0e;使用CSS 让该节点不可见&#xff0c;方法越多越好。 <div class"hidden">Hi</div> 使用CSS 让节点不可见的方法有以下几种&#xff1a; 把 visibility 属性设置为 hidden&#xff0c;这样元素框不会被绘制&…

vuex的实现原理?(vue2)

通常我们使用vuex&#xff0c;都是通过下载vuex插件&#xff0c;自己创建一个store目录&#xff0c;在里面创建一个js文件&#xff0c;在文件中引入vuex&#xff0c;vue.use我们的vuex从而通过实例化一个vuex&#xff0c;定义五大核心从而实现一个基本的vuex。 那我们如何不下…

react学习笔记——4. 虚拟dom中处理动态数据

如下需求 方式1&#xff1a; 直接在ul中使用{data}&#xff0c;是可以遍历数据的&#xff0c;然后如果将data改成下面形式&#xff0c;也是可以实现的。但是如果data是一个对象&#xff0c;则不能便利。 const data [<li>Angular</li>, <li>React</li&g…

第9届Python编程挑战赛北京赛区复赛真题剖析-2023年全国青少年信息素养大赛

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛系列的第16讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设计与…

今天我花了一个通宵的时间安装Windows11系统居然失败,忍不住哭了!

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&#x1…

安装使用IDEA,修改样式,配置服务,构建Maven项目(超级详细版)

目录 前言&#xff1a; 一&#xff0c;安装 1.1打开官网JetBrains: Essential tools for software developers and teams点击 Developer Tools&#xff0c;再点击 Intellij IDEA 2.点击下载​编辑 3.选择对应的版本&#xff0c;左边的 Ultimate 版本为旗舰版&#xff0c;需要…

WordPress中手动返回404的优雅方式

这篇文章也可以在我的博客中查看 关于本文 WordPress虽然有比较完善的404处理机制&#xff0c;但有时候我们需要手动返回404&#xff0c;这篇文章就来探讨一下这个问题。 何时返回404 根据mdn&#xff0c;404用作示意客户端找不到相应的资源&#xff0c;这可能是&#xff1…

Java课题笔记~ JSP内置对象

(1)九个内置对象 jsp的内置对象&#xff1a;JSP内置对象是不需要声明和创建就可以在JSP页面脚本中使用的成员变量。 九个内置对象&#xff1a; 1.out对象 在JSP页面中&#xff0c;经常需要向客户端发送文本内容&#xff0c;这时&#xff0c;可以使用out对象来实现。out对象…

第八章 SpringBoot @ConfigurationProperties配置绑定

原始做法&#xff1a;读取到文件内容&#xff0c;再进行bean的绑定 public static void readProperties(String propertiesPath) throws IOException {Properties pps new Properties();pps.load(MainApplication.class.getClassLoader().getResourceAsStream("applicat…

Linux中无法忘记mysql密码处理办法

找到/etc/my.cnf或者/etc/mysql/my.cnf文件 添加下面两行代码&#xff0c;取消密码验证 [mysqld] skip-grant-table使用命令登录&#xff1a;mysql -u root -p&#xff0c;回车&#xff0c;回车使用sql语句来修改密码 mysql>use mysql; mysql>update user set password…

基于ipad协议的GEWE框架进行微信收藏夹管理(一)

友情链接 GEWE框架 geweapi.com 点击即可访问&#xff01; 获取收藏信息 小提示&#xff1a; 获取收藏相关信息注意&#xff1a;该接口作用不大 请求URL&#xff1a; http://域名地址/api/favor/getinfo 请求方式&#xff1a; POST 请求头&#xff1a; Content-Type&a…

Martin_DHCP_V3.0 (DHCP自动化泛洪攻击GUI)

Github>https://github.com/MartinxMax/Martin_DHCP_V3.0 首页 Martin_DHCP_V3.0 自动化DHCP洪泛攻击 Martin_DHCP_V3.0 使用方法 安装三方库 #python3 1.RunMe_Install_Packet.py 攻击路由器 #python3 Martin_DHCP_Attack.py 填写网卡 填写攻击次数 开始运行

【正点原子STM32连载】第三章 开发环境搭建摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第三…
最新文章