React@16.x(44)路由v5.x(9)源码(1)- path-to-regexp

目录

  • 1,作用
  • 2,实现获取 match 对象
    • 2.1,match 对象的内容
    • 2.2,注意点
    • 2.3,实现

1,作用

之前在介绍 2.3 match 对象 时,提到了 react-router 使用第3方库 path-to-regexp 来匹配路径正则。

我们也利用它(版本v6.2.2),来手动实现一个获取类似 match 对象的方法。

2,实现获取 match 对象

2.1,match 对象的内容

  • 不匹配时,返回 null
  • 匹配时,返回一个对象

比如对下面的路由组件来说,

<Route path="/news/:id" component={News}></Route>

当访问 http://localhost:5173/news/123 时,返回的对象:

{"path": "/news/:id","url": "/news/123","isExact": true,"params": {"id": "123"}
}

2.2,注意点

先做个测试,看下返回内容。

import { pathToRegexp } from "path-to-regexp";const path = "/news/:id";
const keys = [];
const regExp = pathToRegexp(path, keys);
console.log(regExp);
const result = regExp.exec(location.pathname);
console.log(result);
console.log(keys);

regExp 一个正则对象,

/^\/news(?:\/([^\/#\?]+?))[\/#\?]?$/i

result 匹配的结果,

["/news/123","123"
]

keys 的结果,

[{"name": "id","prefix": "/","suffix": "","pattern": "[^\\/#\\?]+?","modifier": ""}
]

除了 match.isExact 属性,其他的东西都有了。而 match.isExact 可通过 location.pathname === result[0] 判断。

另外,还需要注意一点,<Route> 组件可以设置 exact 来表示是否精确匹配。比如,

<Route path="/news/:id" exact></Route>

此时访问 http://localhost:5173/news/123/xxx 是并不匹配,matchnull

path-to-regexp 的默认配置项,是匹配到路径字符串结尾。所以这个配置项就相当于 exact

在这里插入图片描述

2.3,实现

import { pathToRegexp } from "path-to-regexp";/*** 返回一个类似 match 的对象。* @param {*} path 路径规则* @param {*} pathname 真实的地址* @param {*} options react-router-dom 的 Route 组件的配置项。*/
export default function matchPath(path, pathname, options) {const keys = [];const regExp = pathToRegexp(path, keys, getOptions(options));const result = regExp.exec(pathname);if (!result) {return null;}const params = getParams(result.slice(1), keys);return {path,url: result[0],isExact: pathname === result[0],params,};
}/*** 返回符合 path-to-regexp 的配置项属性。* @param {*} options* @returns*/
function getOptions(options = {}) {const defaultOptions = {exact: false, // 不精确匹配sensitive: false, // 大小写敏感strict: false, // 严格模式};const opts = {...defaultOptions,...options,};return {end: opts.exact, // 更改 keysensitive: opts.sensitive,strict: opts.strict,};
}function getParams(result, keys) {const obj = {};keys.forEach((f, index) => {obj[f.name] = result[index];});return obj;
}

测试1,

const match = pathMatch("/news/:id/:no", location.pathname);

当访问 http://localhost:5173/news/123/asd 时返回,

{"path": "/news/:id/:no","url": "/news/123/asd","isExact": true,"params": {"id": "123","no": "asd"}
}

测试2,

const match = pathMatch("/news/:id/:no", location.pathname);

当访问 http://localhost:5173/news/123/asd/xxx 时返回,

{"path": "/news/:id/:no","url": "/news/123/asd","isExact": false,"params": {"id": "123","no": "asd"}
}

以上。

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

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

相关文章

新能源汽车 LabCar 测试系统方案(二)

什么是LabCar测试 LabCar测试目标是进行整车黄板台架功能测试&#xff0c;用于整车开发和测试阶段&#xff0c;满足设计人员和测试人员的试验需求&#xff0c;以验证整车性能&#xff0c;减少开发工作量。系统主要用于测试静态及动态工况下的纯电动汽车的各项功能实现情况。 …

git 用户名密码Clone代码

#密码中包含&#xff0c;则使用%40代表 cd /disk03/wwwroot/GitDemo/BuildTemp && git clone -b dev --single-branch http://root:test%40123192.168.31.104/root/SaaS.Auto.Api.git git pull origin dev 今天使用LibGit2Sharp在Linux上Clone代码时报错&#xff0c;因…

【计算机网络】HTTP——基于HTTP的功能追加协议(个人笔记)

学习日期&#xff1a;2024.6.29 内容摘要&#xff1a;基于HTTP的功能追加协议和HTTP/2.0 HTTP的瓶颈与各功能追加协议 需求的产生 在Facebook、推特、微博等平台&#xff0c;每分每秒都会有人更新内容&#xff0c;我们作为用户当然希望时刻都能收到最新的消息&#xff0c;为…

laravel Dcat Admin 入门应用(三)Grid 之 Column

Dcat Admin 是一个基于 Laravel-admin 二次开发而成的后台构建工具&#xff0c;只需很少的代码即可构建出一个功能完善的高颜值后台系统。支持页面一键生成 CURD 代码&#xff0c;内置丰富的后台常用组件&#xff0c;开箱即用&#xff0c;让开发者告别冗杂的 HTML 代码。 larav…

如何在Vue3项目中引入TypeScript

在这篇文章中&#xff0c;我们将一步步指导你如何在Vue3项目中引入TypeScript。TypeScript是一种强类型的JavaScript超集&#xff0c;可以帮助我们在编写代码时避免许多错误&#xff0c;提高代码的可维护性。下面是具体的实现过程&#xff1a; 第一步&#xff1a;初始化Vue3项目…

Python | Leetcode Python题解之第188题买卖股票的最佳时机IV

题目&#xff1a; 题解&#xff1a; class Solution:def maxProfit(self, k: int, prices: List[int]) -> int:if not prices:return 0n len(prices)k min(k, n // 2)buy [0] * (k 1)sell [0] * (k 1)buy[0], sell[0] -prices[0], 0for i in range(1, k 1):buy[i] …

尚硅谷vue2的todolist案例解析,基本概括了vue2所有知识点,结尾有具体代码,复制粘贴学习即可

脚手架搭建 1-初始化脚手架&#xff08;全局安装&#xff09; npm install -g vue/cli2-切换到创建项目的空目录下 vue create xxxx整体结构 整体思路 App定义所有回调方法 增删改查 还有统一存放最终数据&#xff0c;所有子组件不拿数据&#xff0c;由App下发数据&#xf…

App托管服务分发平台 index-uplog.php 文件上传致RCE漏洞复现

0x01 产品简介 App托管服务分发平台是一个为开发者提供全面、高效、安全的应用程序托管、分发和推广服务的平台。开发者可以将自己开发的应用程序上传到平台上,平台会对上传的应用程序进行审核,确保应用的质量和安全性。平台会根据开发者的要求,将应用分发到不同的应用市场…

5G RAN

两个entity&#xff1a;NodeB、UE entity之间传输数据的东东 entity内部的流水线岗位&#xff1a;L3/L2/L1 岗位之间是消息交互/信令交互

利用labelme制作自己的coco数据集(labelme转coco数据集)

最近刚接触学习mmdetection&#xff0c;需要用到coco格式的数据集。 1.安装labelme 建议在conda(base)环境下安装&#xff08;前提是需要下载anaconda&#xff09;,下面是我已经装过的情况。 2.进入labelme环境下 中间可能会提示安装其它库&#xff0c;自行装上就行。 这里的…

Rtt与linux线程关键函数差异问题

rt_thread_startup和pthread_join()是两个用于处理线程的函数&#xff0c;但它们属于不同的线程库和操作系统环境&#xff0c;具有显著的功能差异。以下是它们的功能对比和差异说明&#xff1a; rt_thread_startup 功能&#xff1a; rt_thread_startup函数用于使初始化状态的…

Codeforces 220B

传送门 题目大意 给出一个长度为 n n n的序列&#xff0c;进行 m m m次询问。 每次询问区间 [ l , r ] [l,r] [l,r]内&#xff0c;有多少个数字 x x x刚好出现了 x x x次。 思路 枚举右端点 r r r&#xff0c;维护左端点 l l l&#xff0c;设法将 s u m ( l , r ) s u m (…

智能社区服务小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;房屋信息管理&#xff0c;住户信息管理&#xff0c;家政服务管理&#xff0c;家政预约管理&#xff0c;报修信息管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;房屋信…

Flood Fill——AcWing 1097. 池塘计数

Flood Fill 定义 Flood Fill算法&#xff0c;又称为洪水填充或种子填充算法&#xff0c;是一种在图或网格数据结构中探索连通区域的搜索算法。它从一个初始节点&#xff08;种子点&#xff09;开始&#xff0c;将具有相同属性&#xff08;如颜色、值等&#xff09;的相邻节点…

P4. 微服务: 匹配系统(下)

P4. 微服务: 匹配系统 下 0 概述1 游戏同步系统1.1 游戏同步的设计1.2 游戏同步的实现 2 匹配系统微服务的实现2.1 微服务概述2.2 匹配系统接口url的实现2.3 微服务之间的通信2.4 匹配逻辑的实现2.5 匹配系统的权限控制 3 bug的解决3.1 自己匹配自己3.2 断开连接问题 0 概述 本…

大数据之Linux部署常用命令脚本封装

文章目录 编写集群命令执行脚本xcall集群命令执行1. 脚本需求2. 需求分析3. 脚本实现3.1 创建脚本存放目录3.2 编写xcall脚本3.3 修改脚本执行权限3.4 测试脚本 编写集群分发脚本xsync集群分发脚本1. 脚本需求2. 需求分析3. 脚本实现3.1 创建脚本存放目录3.2 编写xsync脚本3.3 …

计算机毕业设计PyFlink+Spark+Hive民宿推荐系统 酒店推荐系统 民宿酒店数据分析可视化大屏 民宿爬虫 民宿大数据 知识图谱 机器学习

本科毕业设计(论文) 开题报告 学院 &#xff1a; 计算机学院 课题名称 &#xff1a; 民宿数据可视化分析系统的设计与实现 姓名 &#xff1a; 庄贵远 学号 &#xff1a; 2020135232 专业 &#xff1a; 数据科学与大数据技术 班级 &#xff1a; 20大数据本科2…

微信小程序怎么使用本地存储

微信小程序提供了丰富的API来实现本地存储功能&#xff0c;主要通过以下几个方法来进行数据的存取&#xff1a; 1. wx.setStorageSync() 功能&#xff1a;将数据存储在本地缓存中指定的key中。这是一个同步接口。 用法&#xff1a; Javascript 1wx.setStorageSync(key, val…

重温react-06(初识函数组件和快速生成格式的插件使用方式)

开始 函数组件必然成为未来发展的趋势(个人见解),总之努力的去学习,才能赚更多的钱.加油呀! 函数组件的格式 import React from reactexport default function LearnFunction01() {return (<div>LearnFunction01</div>) }以上是函数式组件的组基本的方式 快捷生…

基于DSMM数据安全能力建设方案的落地性评估指标

写在前面&#xff1a; 随着信息技术的迅猛发展&#xff0c;数据已成为企业最宝贵的资产之一。然而&#xff0c;数据安全问题也随之而来&#xff0c;如何确保数据的安全性、完整性和可用性&#xff0c;已成为企业面临的重要挑战。DSMM&#xff08;数据安全能力成熟度模型&#x…