react-router 源码之matchPath方法

news2024/10/5 21:19:08

1. 基础依赖path-to-regexp

react-router提供了专门的路由匹配方法matchPath(位于packages/react-router/modules/matchPath.js),该方法背后依赖的其实是path-to-regexp包。

path-to-regexp输入是路径字符串(也就是Route中定义的path的值),输出包含两部分
● 正则表达式(re)
● 一个数组(keys)(用于记录param的key信息)

2. matchPath核心

matchPath方法首先通过path-to-regexp的方法来获取Route上定义的path对应的正则,再将生成的正则表达式与url中的pathname做正则匹配判断是否匹配。
把地址中的路径和属性中的path进行匹配,返回匹配结果

let pathToRegExp = require('path-to-regexp');
function compilePath(path, options) {
    const keys = [];
    const regexp = pathToRegExp(path, keys, options);
    return { keys, regexp };
}
/**
 * 把地址中的路径和属性中的path进行匹配,返回匹配结果 
 * @param {*} pathname  地址中的路径
 * @param {*} options 属性对象
 */
function matchPath(pathname, options = {}) {
    // exact 是否精确匹配 sensitive 是否大小写敏感
    let { path = "/", exact = false, strict = false, sensitive = false } = options;
    let { keys, regexp } = compilePath(path, { end: exact, strict, sensitive });
    let match = regexp.exec(pathname);
    if (!match) return null;
    const [url, ...groups] = match;
    //pathname=/user/list  regxp =/\/user/ url=/user
    const isExact = pathname === url;//是否完整匹配url路径
    return {
        path,//Route 里的路径
        url,//正则匹配到的浏览器路径的部分
        isExact,// 是否精确匹配
        params: keys.reduce((memo, key, index) => {//路径参数对象
            memo[key.name] = groups[index];
            return memo;
        }, {})
    }

}
export default matchPath;

3.route 渲染

在这里插入图片描述

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

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

相关文章

AI:145-智能监控系统下的行人安全预警与法律合规分析

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…

vscode 设置打开终端的默认工作目录/路径

vscode 设置打开终端的默认工作目录/路径** 文章目录 vscode 设置打开终端的默认工作目录/路径**打开vscode,打开设置UI 或是设置JSON文件,找到相关设置项方式1:通过打开settings.json的UI界面 设置:方式2:通过打开设置settings.j…

应急响应靶机训练-Web1【题解】

前言 接上文,应急响应靶机训练-Web1。 此文为应急响应靶机训练-Web1【题解】篇 解题过程 视频版: 另外,师傅们可以关注一下我们的bilibili,以后跟应急响应相关的靶机都会在bilibili发布一份视频 应急响应靶机训练-Web1【题解…

【MySQL】主从同步原理、分库分表

主从同步原理 1. 主从同步原理 MySQL 经常先把命令拷入硬盘的日志,再执行日志的命令,这样的好处: 日志的位置固定,拷入硬盘的开销不大;将命令先准备好,而不是边读边执行,性能更好,…

TCGA临床及肿瘤信息解读

TCGA临床信息各英文列解读 地址:https://docs.gdc.cancer.gov/Data_Dictionary/viewer/#?viewtable-entity-list&anchorclinical 一些用药 Cisplatin:顺铂,顺铂的作用机制主要通过与DNA结合,形成DNA-顺铂加合物&#xff0…

练习 2 Web [ACTF2020 新生赛]BackupFile 1

[ACTF2020 新生赛]BackupFile 1 Web常规题目 首先尝试查找常见的前端页面index.php之类的,没找到 题目有个“BackupFile”——备份文件 尝试用工具遍历查找相关的文件 御剑没扫出来,搜索搭建好dirsearch后,扫出来的index.php.bak 扫描工…

【4.3计算机网络】网络规划与设计

目录 1.网络规划2.逻辑网络设计3.物理网络设计 1.网络规划 需求分析->通信规范分析->逻辑网络设计->物理网络设计->实施阶段 2.逻辑网络设计 3.物理网络设计 例题1: 解析:选A。 例题2: 解析:选A。 例题3. 解析&am…

2024年小程序云开发CMS内容管理无法使用,无法同步内容模型到云开发数据库的解决方案,回退老版本CMS内容管理的最新方法

一,问题描述 最近越来越多的同学找石头哥,说cms用不了,其实是小程序官方最近又搞大动作了,偷偷的升级的云开发cms(内容管理)以下都称cms,不升级不要紧,这一升级,就导致我…

uniapp:启动图 .9png 制作教程

1、工具安装:自行下载Android Studio 2、制作.9png 注意上图3条黑线的位置,意思是:标注黑线的位置可以进行缩放。 对其大多数启动图来说,标注以上3条黑线即可。

Sora的潜力与影响:对视频制作、广告、娱乐等行业的深度解析

随着技术的飞速发展,OpenAI推出的Sora模型已经引起了广泛关注。作为一款强大的视频生成工具,Sora不仅改变了视频制作的传统模式,更对广告、娱乐等多个行业产生了深远影响。本文将深度解析Sora的潜力与影响,探讨其在视频制作、广告…

JVM之CMS垃圾收集器详解

CMS垃圾收集器 CMS回收流程 官网: https://docs.oracle.com/javase/8/docs/technotes/guides/vm/gctuning/cms.html#concurrent_mark_sweep_cms_collector CMS(Concurrent Mark Sweep)收集器是一种以获取 最短回收停顿时间为目标的收集器。 采用的是"标记-清除…

重拾前端基础知识:CSS3

重拾前端基础知识:CSS3 前言边框圆角阴影图片 背景渐变文本字体多列动画与过渡2D 转换3D 转换过渡动画 网格布局弹性盒子(重点)父元素设置子元素设置 响应式设计设置 Viewport构建响应式网格视图12栅格媒体查询 案例讲解图片按钮分页 浏览器支…

面试数据库篇(mysql)- 10事务中的隔离性是如何保证

锁:排他锁(如一个事务获取了一个数据行的排他锁,其他事务就不能再获取该行的其他锁mvcc : 多版本并发控制MVCC 全称 Multi-Version Concurrency Control,多版本并发控制。指维护一个数据的多个版本,使得读写操作没有冲突 MVCC的具体实现,主要依赖于数据库记录中的隐式字段…

进程间通信的常见方式

进程间通信是计算机系统中不同进程之间进行数据交换和共享信息的方式。 父子进程之间其他地址空间不一样,但共享同一块内核空间。进程间通信的本质还是通过内核开辟缓冲区,一个进程写,一个进程读这样的工作原理。 常见的通信方式包括&#x…

一键安装|卸载 mysql 8.2.0 shell脚本

场景:为了在无网、外网 mysql 安装方便,这里分享一个自己编写得 shell脚本 这里以当前最新版 mysql 8.2.0;centos-7 二进制包下载: 下载地址 mysql_install.sh #!/bin/bash # 解压安装包 tar -xf mysql-8.2.0-linux-glibc2.17-x8…

Unity - 相机画面为黑白效果

一、 在Hierarchy中创建一个Global Volume,并设置它为局部作用 二、 将场景出现的作用域范围缩小至相机所在位置,将相机包含即可。 三、添加覆盖组件Color Adjustments,并将Saturation直接拉为-100 。 此时,相机拍摄画面为黑白,场景视图中…

ifcplusplus 示例 函数中英文 对照分析

有需求,需要分析 ifc c渲染,分析完,有 230个函数,才能完成一个加载,3d加载真的是大工程! 函数中英文对照表,方便 日后开发,整理思路顺畅!!!&#…

回归预测 | Matlab实现CPO-BiTCN-BiGRU冠豪猪算法优化双向时间卷积门控循环单元多变量回归预测

回归预测 | Matlab实现CPO-BiTCN-BiGRU冠豪猪算法优化双向时间卷积门控循环单元多变量回归预测 目录 回归预测 | Matlab实现CPO-BiTCN-BiGRU冠豪猪算法优化双向时间卷积门控循环单元多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-BiTCN-B…

kubesphere jenkins 流水线 未运行(解决方案)

场景: 在kubesphere 中运行 流水线 devops 结果,显示未运行 但是用 admin 账户是可以运行成功的。 问题解决 1- 查日志: 然后 Caused: org.acegisecurity.userdetails.UsernameNotFoundException: org.springframework.security.core.…

yolov5v7v8目标检测增加计数功能--免费源码

在yolo系列中,很多网友都反馈过想要在目标检测的图片上,显示计数功能。其实官方已经实现了这个功能,只不过没有把相关的参数写到图片上。所以微智启软件工作室出一篇教程,教大家如何把计数的参数打印到图片上。 一、yolov5目标检测…