HOW - React Router Feature 实践(react-router-dom)

目录

  • 基本特性
  • ranked routes matching
  • active links
    • NavLink
    • useMatch
  • relative links
      • 1. 相对路径的使用
      • 2. 嵌套路由的增强行为
      • 3. 优势和注意事项
      • 4. . 和 ..
      • 5. 总结
  • data loading

基本特性

  1. client side routing
  2. nested routes
  3. dynamic segments

比较好理解,这里不赘述。

ranked routes matching

When matching URLs to routes, React Router will rank the routes according to the number of segments, static segments, dynamic segments, splats, etc. and pick the most specific match.

这句话描述了 React Router 在匹配 URL 和路由时的策略,即根据路由的具体性来优先选择最合适的匹配项。让我们逐步解析这句话的含义:

  1. URL 和路由的匹配

    • 当用户访问某个 URL 时,React Router 需要确定哪个路由规则最适合处理该 URL。例如,对于 URL /users/123,React Router 需要决定是匹配 /users/:id 还是其他定义的路由。
  2. 路由匹配的考量因素:优先级由高到低

    • 路由的段数(Segments):URL 和路由可以分成多个段(segments),例如 /users/123 有两个段,/users/:id 也有两个段。React Router 会比较 URL 和每个路由的段数,越多的段数一般意味着路由更具体。

    • 静态段(Static Segments):静态段是指在路由中直接指定的固定路径,例如 /users 是一个静态段。React Router 会考虑静态段的数量来确定路由的具体性。

    • 动态段(Dynamic Segments):动态段是指在路由中使用参数化路径,例如 /users/:id 中的 :id 是一个动态段。动态段的存在可能使得路由更灵活但也更具体。

    • 通配符(Splat):通配符(如 *)表示匹配多个路径段,通常用于处理不确定数量的路径部分。

  3. 最具体的匹配

    • React Router 会通过比较以上因素来确定哪个路由定义是最具体的匹配。具体的路由定义意味着它能够最准确地匹配当前的 URL,而不会与其他可能的路由定义冲突。
  4. 示例

<Route path="/teams/:teamId" />
<Route path="/teams/new" />

对于 http://example.com/teams/new. 会优先匹配第二个 Route。因为静态段数为 2,更具体。

理解 React Router 的路由匹配策略,特别是根据路由的具体性来优先选择最合适的匹配项,有助于开发者更有效地设计和管理复杂的路由结构。通过正确的路由定义和优先级排序,可以确保应用程序在导航和页面渲染时行为符合预期,并能够灵活地应对各种场景和URL路径。

active links

NavLink

https://reactrouter.com/en/main/components/nav-link

<NavLinkstyle={({ isActive, isPending }) => {return {color: isActive ? "red" : "inherit",};}}className={({ isActive, isPending }) => {return isActive ? "active" : isPending ? "pending" : "";}}
/>

useMatch

https://reactrouter.com/en/main/hooks/use-match

function SomeComp() {const match = useMatch("/messages");return <li className={Boolean(match) ? "active" : ""} />;
}

relative links

理解 React Router 中 <Link><NavLink> 组件相对路径的使用需要考虑它们与 HTML 中 <a> 标签的行为差异,尤其是在嵌套路由场景下的增强行为。

1. 相对路径的使用

  • HTML <a> 标签:在 HTML 中,使用 <a> 标签时,相对路径通常相对于当前页面的完整 URL。这意味着,相对路径会根据当前页面的路径来构建最终的目标 URL。

    <a href="about">About</a>
    
    • 如果当前 URL 是 http://example.com/home,那么点击上述链接将导航到 http://example.com/about
  • React Router 中的 <Link><NavLink>:在 React Router 中,<Link><NavLink> 组件可以接受相对路径,但它们的行为略有不同。

    import { Link, NavLink } from 'react-router-dom';<Link to="about">About</Link>
    <NavLink to="about">About</NavLink>
    
    • 这里的 to="about" 是相对路径,相对于当前路由的路径来构建目标 URL。例如,如果当前路由是 /home,那么这两个链接将会导航到 /home/about

2. 嵌套路由的增强行为

  • 嵌套路由:当应用程序中存在嵌套路由时,React Router 的 <Link><NavLink> 组件表现出更智能的行为,确保相对路径的正确解析。

    <Route path="/home"><Link to="about">About</Link><NavLink to="about">About</NavLink>
    </Route>
    
    • 在上述例子中,假设当前路由是 /home,那么 <Link><NavLink> 组件会基于当前路由的路径 /home 构建相对路径,导航到 /home/about

3. 优势和注意事项

  • 灵活性和便利性:相对路径的使用使得在应用中链接管理更加灵活和简单,尤其是在处理嵌套路由时。

  • 注意路径解析:确保理解相对路径在不同嵌套层级下的解析规则。React Router 的行为通常是基于当前活动的路由来解析相对路径,而不是简单地相对于根路径

4. . 和 …

<Route path="/home"><Link to=".">About</Link><NavLink to=".">About</NavLink>
</Route>
  • 在上述例子中,假设当前路由是 /home,那么 <Link><NavLink> 组件会基于当前路由的路径 /home 构建相对路径,导航到 /home
<Route path="home" element={<Home />}><Route path="project/:projectId" element={<Project />}><Route path=":taskId" element={<Task />} /></Route>
</Route>

Project 中会渲染:

  <Link to="abc"><Link to="."><Link to=".."></Link><Link to=".." relative="path">
  • 在上述例子中,假设当前路由是 /home/project/123,那么 <Link> 会基于当前路由的路径构建相对路径,分别导航到 /home/project/123/abc/home/project/abc/home/home/project

注意后面两个的差异:

By default, the … in relative links traverse the route hierarchy, not the URL segments. Adding relative=“path” in the next example allows you to traverse the path segments instead.

5. 总结

理解 React Router 中 <Link><NavLink> 组件相对路径的行为,特别是在嵌套路由情况下的增强行为,有助于开发者更有效地管理和导航应用程序中的链接。相对路径的使用使得在不同层级和场景下的导航操作更加灵活和便捷,但需要注意理解和控制路径的解析和构建规则。

data loading

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

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

相关文章

【C语言】控制台扫雷(C语言实现)

目录 博文目的实现思路项目创建文件解释 具体实现判断玩家进行游戏还是退出扫雷棋盘的确定地图初始化埋雷玩家扫雷的实现雷判断函数 源码game.cgame.h扫雷.c 博文目的 相信不少人都学习了c语言的函数&#xff0c;循环&#xff0c;分支那我们就可以写一个控制台的扫雷小游戏来检…

面向对象-封装

一.包 1.简介 当我们把所有的java类都写src下的第一层级&#xff0c;如果是项目中&#xff0c;也许会有几百个java文件。 src下的文件会很多&#xff0c;开发的时候不方便查找&#xff0c;也不方便维护如果较多的文件中有同名的&#xff0c;十分麻烦 模块1中有一个叫test.ja…

android应用的持续构建CI(二)-- jenkins集成

一、背景 接着上一篇文章&#xff0c;本文我们将使用jenkins把所有的流程串起来。 略去了对android应用的加固流程&#xff0c;重点是jenkins的job该如何配置。 二、配置jenkins job 0、新建job 选择一个自由风格的软件项目 1、参数赋值 你可以增加许多参数&#xff0c;这…

Games101学习笔记 Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing)

Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing 一、蒙特卡洛积分 Monte Carlo Integration二、路径追踪 Path tracing1.Whitted-Style Ray Tracings Problems2.只考虑直接光照时3.考虑全局光照①考虑物体的反射光②俄罗斯轮盘赌 RR &#xff08;得到正确shade函数&#x…

全球投资中如何规避国别风险

不管邓普顿在全球投资中是自上而下的选股&#xff0c;还是自下而上的选股&#xff0c;他都不得不面临在不在某一个国家大规模投资的问题。尽管我暂时不会考虑跨国投资&#xff0c;不过还是可以学习一下。那么&#xff0c;他是怎么规避国别风险的呢&#xff1f;劳伦在《逆向投资…

Linux-Kafka 3.7.0 Kraft+SASL认证模式 集群安装与部署超详细

1.集群规划 一般模式下&#xff0c;元数据在 zookeeper 中&#xff0c;运行时动态选举 controller&#xff0c;由controller 进行 Kafka 集群管理。kraft 模式架构&#xff08;实验性&#xff09;下&#xff0c;不再依赖 zookeeper 集群&#xff0c;而是用三台 controller 节点…

嵌入式底层系统了解

当裸机功能不复杂的时候&#xff0c;即类似与点亮一个LED灯&#xff0c;驱动LCD和OLED这样的模块&#xff0c;以及各位大学生的搭积木式的毕业设计(狗头保命&#xff09;&#xff0c;此时可以简单地分为硬件和软件层&#xff08;应用层),以及以中间层作为中间联系。 当需要实现…

深入Kafka:如何保证数据一致性与可靠性?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello, 大家好!我是小米,今天我们来聊一聊Kafka的一致性问题。Kafka作为一个高性能的分布式流处理平台,一直以来都备受关注。今天,我将深入探讨Kaf…

C++(第四天----拷贝函数、类的组合、类的继承)

一、拷贝构造函数&#xff08;复制构造函数&#xff09; 1、概念 拷贝构造函数&#xff0c;它只有一个参数&#xff0c;参数类型是本类的引用。如果类的设计者不写拷贝构造函数&#xff0c;编译器就会自动生成拷贝构造函数。大多数情况下&#xff0c;其作用是实现从源对象到目…

Python获取QQ音乐歌单歌曲

准备工作 歌单分享的url地址 比如: https://i.y.qq.com/n2/m/share/details/taoge.html?hosteuin=oKvzoK4l7evk7n**&id=9102222552&appversion=130605&ADTAG=wxfshare&appshare=iphone_wx 代码实现 def mu(share_url):share_url = share_url.split(id=)[1…

目标检测入门:3.目标检测损失函数(IOU、GIOU、GIOU)

目录 一、IOU 二、GIOU 三、DIOU 四、DIOU_Loss实战 在前面两章里面训练模型时&#xff0c;损失函数都是选择L1Loss&#xff08;平均绝对值误差&#xff08;MAE&#xff09;&#xff09;损失函数&#xff0c;L1Loss损失函数公式如下: 由公式可知&#xff0c;L1Loss损失函数…

为PPT加密:如何设置和管理“打开密码”?

在保护演示文稿的内容时&#xff0c;给PPT文件设置“打开密码”是一个简单而有效的方法。今天一起来看看如何设置和管理PPT文件的“打开密码”吧&#xff01; 一、设置PPT“打开密码” 首先&#xff0c;打开需要加密的PPT文件&#xff0c;点击左上角的“文件”选项卡&#x…

oracle如何判定数据库的时区并进行时间的时区转换

在Oracle数据库中&#xff0c;判断和设置时区以及进行时区的转换是很重要的功能。以下是一些基本的步骤和方法&#xff1a; 1. 判定数据库的时区 要查看Oracle数据库的时区&#xff0c;你可以查询DBTIMEZONE。例如&#xff1a; sql SELECT DBTIMEZONE FROM DUAL; 这将返回…

大数据------JavaWeb------JSP(完整知识点汇总)

JSP 定义 JSP&#xff08;Java Server Pages&#xff09;&#xff0c;即Java服务端页面。它是一种动态的网页技术&#xff0c;其中可以定义HTML、CSS、JS等静态内容&#xff0c;还可以定义Java代码的动态内容JSP HTML Java 说白了JSP就是一个页面&#xff0c;它既可以写HTML标…

iOS App 测试环境升级,遇到的问题以及解决方法

iOS App 测试环境升级&#xff0c;遇到的问题以及解决方法 Mac 实体机升级到 Sonima 14.5 Xcode 升级到 15.3 问题1&#xff1a; Xcode 编译 WebDriverAgent 失败 尝试下载 最新版本的WDA 源码编译&#xff0c;可以编译成功。 问题2&#xff1a;具体坐标直接点击的代码都会报错…

Meta自动化脚本机器人:构建高效社交平台工具

社交平台的自动化工具可以极大提升运营效率&#xff0c;本文将指导您如何构建一个Meta自动化脚本机器人&#xff0c;实现消息自动回复、内容定时发布等功能。 引言 Meta平台拥有庞大的用户群体&#xff0c;自动化脚本机器人可以帮助管理员高效管理社群、自动化日常任务。本教…

C#面:String str=new String(“a“)和String str = “a“有什么区别

String str new String&#xff08;“a”&#xff09;和String str “a”的区别在于对象的创建方式和内存分配方式。 字符串 str new String&#xff08;“a”&#xff09;&#xff1a; 使用new关键字显式地创建了一个新的String对象。 每次执行这行代码时&#xff0c;都会…

uniapp中 uni.previewImage用法

查看多张照片&#xff0c;图片地址用逗号分隔 showimig(item) {if (item.trainingRoom) {const urls item.trainingRoom.split(,);uni.previewImage({urls: urls,current: ,success: function(res) {// 成功的回调},fail: function(res) {// 失败的回调},complete: function(…

Linux常用命令sed -i 文本替换(常应用:修改linux<华为openEuler>repo源)

目录 sed -i应用场景sed -i命令详解 sed -i应用场景 修改Linux系统软件源&#xff08;以openEuler为例&#xff09; sed -i s|http://repo.openeuler.org/|https://mirrors.huaweicloud.com/openeuler/|g /etc/yum.repos.d/openEuler.repo默认情况下&#xff0c;sed 使用斜杠&…

亮相2024世界人工智能大会,扫描全能王AIGC“黑科技”助力敦煌遗书数字化修复

7月4日&#xff0c;2024年世界人工智能大会&#xff08;简称“大会”&#xff09;在上海举行。这次这场科技与创新的盛会上&#xff0c;一张古朴、典雅的卷轴吸引了众人的目光。这张被修复的卷轴脱胎于敦煌遗书系列古籍&#xff0c;在被机器拍摄扫描后&#xff0c;卷轴上脏污、…