React@16.x(36)路由v5.x(1)简单介绍

目录

  • 1,前言
  • 2,相关知识点介绍
    • 2.1,react-router 和 react-router-dom 的关系
    • 2.2,2种路由模式
      • 2.2.1,Hash 哈希路由
      • 2.2.2,Borswer History 浏览器历史路由
  • 3,React 路由组件
    • 3.1,Route 相关属性
      • 3.1.1,`path`,匹配的路径
      • 3.1.2,`component`,匹配成功后显示的组件
      • 3.1.2,children
    • 3.2,Switch 组件

1,前言

react-router 的最新稳定版,2024.6.16 目前是 v6.23.1,

  • 2021.11.4,v6.0 正式发布。

  • 2022.10.5,v5 版本进行了最后一次升级 v5.3.4。

接下来的文章,介绍的都是 v5 版本 的用法。

2,相关知识点介绍

2.1,react-router 和 react-router-dom 的关系

  • react-router,是路由核心库,包含了路由相关的核心代码。
  • react-router-dom,封装了 react-router,并结合实际页面,实现了和页面路由相关的功能。

所以,一般的 web 应用,只需要安装 react-router-dom 即可。

2.2,2种路由模式

路由:根据不同的页面地址,展示不同的组件。

以 url:https://blog.csdn.net/nav/web?a=b#abc 为例,
路径 path:/nav/web
hash:abc

2.2.1,Hash 哈希路由

原理:当 url 中的 hash 值变化时,不会导致页面刷新。

2.2.2,Borswer History 浏览器历史路由

原理:利用 HTML5 新增的API,来实现改变 url 中的路径而不会刷新页面。

// 旧版已有 API(会刷新页面)
window.history.go()
window.history.back()
window.history.forward()

HTML5 新增API

  • window.history.length
  • window.history.replaceState()
  • window.history.replaceState()

3,React 路由组件

举例:访问 http://localhost:5173/a 会渲染组件 A

import { BrowserRouter as Router, Route } from "react-router-dom";function A() {return <h1>A组件</h1>;
}export default function App() {return (<Router><Route path="/a"><A /></Route></Router>);
}
  • BrowserRouter 是浏览器历史路由。
  • HashRouter 是 hash 路由,需要访问 http://localhost:5173/#/a

3.1,Route 相关属性

Route 组件可以写到任意位置,只需要保证它是 Router 组件的后代元素即可。

3.1.1,path,匹配的路径

<Route path="/a" sensitive><A />
</Route>

默认情况下,对上面的路由来说,有3种情况都能匹配到,

  • http://localhost:5173/a
  • http://localhost:5173/A
  • http://localhost:5173/a/b

1,可设置属性 sensitive 实现对大小写敏感。

<Route path="/a" sensitive><A />
</Route>

此时,只能访问 http://localhost:5173/a 而不能访问 http://localhost:5173/A

2,可设置属性 exact 实现精确匹配,而不是只匹配初始目录。

<Route path="/a" exact><A />
</Route>

此时,只能访问 http://localhost:5173/a 而不能访问 http://localhost:5173/a/b

3,如果不写 path,会匹配任意路径。

<Route><A />
</Route>

此时,所有路径都会访问到 A 组件。

4,path 可以是数组,则只要一个路径满足即可。

<Route path={["/a", "/c"]}><A />
</Route>

3.1.2,component,匹配成功后显示的组件

<Route path="/a"><A />
</Route>

上面的方式可以显示匹配到的组件,使用 component 属性一样的效果:

<Route path="/a" component={A}></Route>

3.1.2,children

举例使用的就是 children

<Route path="/a"><A />
</Route>

children 也可以是函数,此时无论是否匹配,一定会显示 children,并忽略 component 属性

<Router><Route path="/a" component={A}>{() => <h1 style={{ color: "red" }}>必定会看到的内容</h1>}</Route><Route path="/b" component={B}></Route>
</Router>

此时访问 http://localhost:5173/b 除了会渲染 B 组件,也同时会渲染 h1 元素。

3.2,Switch 组件

不能再该组件中,使用除 Route 组件外的其他组件。

Switch 组件的子元素只能是 Route 组件,并且只会显示第一个匹配到的组件。

所以可将该组件中最后一个 Route 组件不设置 path 属性,来作为 404 页面。

作用:当匹配到第一个 Route 后,立即停止匹配。

举例:当访问 http://localhost:5173/a/b 时,因为默认只匹配根目录的原因,会同时渲染 AB 组件和 A 组件。

<Router><Route path="/a/b" component={AB}></Route><Route path="/a" component={A}></Route><Route path="/b" component={B}></Route>
</Router>

使用 Switch 组件后,当访问 http://localhost:5173/a/b 时,只会渲染 AB 组件。

<Router><Switch><Route path="/a/b" component={AB}></Route><Route path="/a" component={A}></Route><Route path="/b" component={B}></Route></Switch>
</Router>

调换顺序后,当访问 http://localhost:5173/a/b 时,只会渲染 A 组件。

<Router><Switch><Route path="/a" component={A}></Route><Route path="/a/b" component={AB}></Route></Switch>
</Router>

以上。

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

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

相关文章

数据类型 运算符

基本数据类型与引用数据类型的区分 存储内容&#xff1a; 基本数据类型&#xff1a;直接存储实际的数据值&#xff0c;如整数、浮点数、字符等。引用数据类型&#xff1a;存储对象的引用&#xff08;内存地址&#xff09;&#xff0c;而不是对象本身。 内存分配&#xff1a; 基…

本地离线模型搭建指南-本地运行显卡选择

搭建一个本地中文大语言模型&#xff08;LLM&#xff09;涉及多个关键步骤&#xff0c;从选择模型底座&#xff0c;到运行机器和框架&#xff0c;再到具体的架构实现和训练方式。以下是一个详细的指南&#xff0c;帮助你从零开始构建和运行一个中文大语言模型。 本地离线模型搭…

打印机状态显示错误是什么原因?这5个有效方法要记好!

打印机是现代办公中不可或缺的设备之一&#xff0c;但在使用过程中&#xff0c;打印机状态显示错误是一个常见的问题。本文将详细探讨打印机状态显示错误的原因及其解决方法。 摘要 打印机状态显示错误的原因及解决方法如下&#xff1a; 1、网络连接问题&#xff1a;原因&…

Spring响应式编程之Reactor核心组件

Reactor核心组件 Flux和Mono组件&#xff08;1&#xff09;Flux组件&#xff08;2&#xff09;Mono组件 Flux和Mono组件 Reactor 框架提供了两个核心组件来发布数据&#xff0c;分别是 Flux 和 Mono 组件。两者都是实现Publisher接口的高级抽象&#xff0c;可以说是应用程序开…

LLM agentic模式之reflection:SELF-REFINE、Reflexion、CRITIC

SELF-REFINE SELF-REFINE出自2023年3月的论文《Self-Refine: Iterative Refinement with Self-Feedback》&#xff0c;考虑到LLM第一次生成结果可能不是最好的输出&#xff0c;提出一种包括反馈(feedback)和改善(refinement)两个步骤的迭代方法来改进LLM的初始输出。 基本思路…

【Orange Pi 5与Linux系统编程】-POSIX消息队列

Linux系统中的POSIX消息队列编程 文章目录 Linux系统中的POSIX消息队列编程1、POSIX 消息队列2、Linux 中的 POSIX 消息队列命名3、POSIX 消息队列调用3.1 mq_open, mq_close3.2 mq_timed_send、mq_send、mq_timed_receive、mq_receive3.3 mq_notify3.4 mq_unlink3.5 mq_getatt…

【Java】已解决java.lang.FileNotFoundException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.lang.FileNotFoundException异常 在Java编程中&#xff0c;java.lang.FileNotFoundException是一个常见的异常&#xff0c;它通常表示程序试图打开一个不存在的文件、文…

打包体积分析和优化

webpack分析工具&#xff1a;webpack-bundle-analyzer 1. 通过<script src"./vue.js"></script>方式引入vue、vuex、vue-router等包&#xff08;CDN&#xff09; // webpack.config.js if(process.env.NODE_ENVproduction) {module.exports {devtool:…

python之mysql数据库的操作

对数据库的操作 &#xff1a; 1 数据库的登录和登出&#xff1a; 登录 终端执行&#xff1a;mysql -uroot -p&#xff1b; 再输入密码&#xff1b; 登出 quit 或exit 2 显示当前的时间&#xff1a; select now() 3 查看所有的数据库&#xff1a; show databases&#…

使用Let‘s Encrypt 申请通配符证书

为什么不使用阿里云/腾讯云等公有云厂商提供的免费证书? 上篇介绍了从阿里云上面申请免费证书,有效期一年 为网站配置https证书 公有云提供的证书不支持通配符&#xff0c;只支持某个确定的解析。 不管是二级域名还是三级域名&#xff0c;只要是具体的确定的地址&#xff0c;都…

spring 、springboot 运行的原理、理解、分析

Spring 和 Spring Boot 是非常流行的 Java 框架&#xff0c;它们的运行原理和设计哲学帮助开发者构建现代化的企业级应用。在这里&#xff0c;我们将深入探讨它们的运行原理、设计理念及其背后的机制。 Spring 框架 1. 核心概念和组件 IoC&#xff08;Inversion of Control&…

代码随想录训练营Day31

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、分发饼干二、摆动序列三、最大子树组合 前言 今天是跟着代码随想录刷题的第31天&#xff0c;主要学习了分发饼干&#xff0c;摆动序列和最大子树组合这三个…

号外!号外!全网第一手Android P刘海屏适配大揭秘,唯一Kotlin算法

如下图所示&#xff1a; 4.2.适配刘海屏 在刘海屏调试打开之后&#xff0c;浏览应用的所有页面&#xff0c;测试所有遮挡问题&#xff0c;或者是下移导致的问题&#xff0c;对有问题的页面进行布局适配。适配方案如下&#xff1a; Google 提供的适配方案&#xff0c;可以设置…

使用VisualBox+Vagrant搭建Centos虚拟机环境

1.下载并安装VisualBox&#xff1b; 2.下载并安装Vagrant; 3.打开cmd窗口&#xff0c;执行命令vagrant init centos/7&#xff0c;初始化centos环境&#xff0c;该步骤受网络带宽影响&#xff0c;可能挂级30分钟到1个小时&#xff1b; 4.启动虚拟机&#xff1a;vagrant up&…

数据库理论大题与编译原理大题(笔记)

目录 数据库&#xff08;求最小函数依赖&#xff09; 数据库&#xff08;求属性集的闭包和候选码&#xff09; 编译原理&#xff08;NFA ——> DFA&#xff09; 编译原理&#xff08;识别文法的活前缀 DFA 和 LR(0) 分析表&#xff09; 哈哈&#xff01;这是本人作者才…

WordPress强大多功能主题模板The7 v9.16.0

模板介绍 The7可以与WPBakery Page Builder&#xff08;原Visual Composer&#xff09;和Ultimate Addons的完全无缝集成。它也与大多数流行的插件完全兼容&#xff0c;例如WooCommerce&#xff0c;WPML&#xff0c;Yoast SEO&#xff0c;All in One WP Migration&#xff0c;…

工具方法 - 教育儿童的一些基本原则

全面而有效的教育需要综合多方面的因素和方法。以下是一些关键的教育原则&#xff1a; 1. 爱与关怀&#xff1a;让孩子感受到无条件的爱和关怀&#xff0c;建立安全感和信任感。这是教育的基础。 2. 榜样作用&#xff1a;父母和教师要以身作则&#xff0c;通过自己的行为和态度…

Windows系统下安装RabbitMQ详细步骤

声明&#xff1a;原文参考链接出自&#xff1a; 如何在Windows系统下安装RabbitMQ_rabbitmq windows安装-CSDN博客 https://zhuanlan.zhihu.com/p/693160757 一、RabbitMQ安装软件资源准备 因为RabbitMQ是Erlang语言开发的&#xff0c;因此安装Erlang环境在进行安装RbbitMQ的…

无需破解,打开就是旗舰版!

在当今快节奏的工作环境里&#xff0c;有效的视觉沟通变得至关重要。流程图、思维导图、组织结构图等图表能够帮助我们以清晰、直观的方式传达复杂信息。而Wondershare Edraw Max正是这样一款强大的绘图工具&#xff0c;它能够帮助用户轻松创建各种专业图表。 软件链接&#x…

基于springboot websocket和okhttp实现消息中转

1、业务介绍 消息源服务的消息不能直接推给用户侧&#xff0c;用户与中间服务建立websocket连接&#xff0c;中间服务再与源服务建立websocket连接&#xff0c;源服务的消息推给中间服务&#xff0c;中间服务再将消息推送给用户。流程如下图&#xff1a; 此例中我们定义中间服…