React Switch用法及手写Switch实现


问:如果注册的路由特别多,找到一个匹配项以后还会一直往下找,我们想让react找到一个匹配项以后不再继续了,怎么处理?
答:<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。
如果没有<Switch>,直接使用一堆<Route>,则每个与当前路径匹配的<Route>都会被绘制

switch 作用


通常情况下,path和component是一一对应的
Switch可以提高路由匹配效率(单一匹配,谁在前面,先匹配谁)
<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。
如果没有<Switch>,直接使用一堆<Route>,则每个与当前路径匹配的<Route>都会被绘制

Switch 使用方法:

Switch 手写代码实现

import React from 'react';
import matchPath from './matchPath';
import RouterContext from './RouterContext';
class Switch  extends React.Component{static contextType = RouterContext;render(){const {location} = this.context;let element,match;React.Children.forEach(this.props.children,route=>{//一旦有一个匹配了,后面的就不再匹配了if(!match && React.isValidElement(route)){element = route;match = matchPath(location.pathname,route.props);}});return match?React.cloneElement(element,{computedMatch:match}):null;}
}
export default Switch;

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

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

相关文章

GCN,R-GCN,岭回归,SVR,随机森林,Adaboost

图卷积神经网络(graph convolutional network, GCN),它将卷积神经网络拓展到图结构形式 中&#xff0c;GCN因可以很好地融合图结构数据的结构特征和属性特征并且有较好的组合泛化能力而被广泛使用。 关系图卷积神经网络(relational-graph convolutional network, R-GCN)&#…

【无标题】积鼎CFD VirtualFlow:航空及汽车燃油晃动流体仿真计算及试验对比

图1 汽车储液罐内的液体晃动 燃油晃动&#xff0c;作为航空、航海及汽车工业中一个重要的物理现象&#xff0c;一直以来都受到广泛关注。在飞行器、船舶或汽车的运行过程中&#xff0c;由于外部扰动或内部燃料的消耗&#xff0c;油箱内的燃油会产生晃动。这种晃动不仅会影响燃…

【Git教程】(五)分支 —— 并行式开发,分支相关操作(创建、切换、删除)~

Git教程 分支 1️⃣ 并行式开发2️⃣ 修复旧版本中的 bug3️⃣ 分支4️⃣ 当前活跃分支5️⃣ 重置分支指针6️⃣ 删除分支7️⃣ 清理提交对象&#x1f33e; 总结 对于版本提交为什么不能依次进行&#xff0c;以便形成一条直线型的提交历史记录&#xff0c;我们认为有 以下两个…

2024热门UI设计工具推荐

最好的UI设计工具可以适应几乎每一个设计过程&#xff0c;并且有望满足您的创造性要求。但既然UI设计工具那么多&#xff0c;应该用什么工具呢&#xff1f; 在过去的几年里&#xff0c;Sketch和figma的结合一直是许多设计师的选择&#xff0c;但其他工具也提供了有竞争力的特点…

LeetCode 刷题 [C++] 第240题.搜索二维矩阵 II

题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 题目分析 通过分析矩阵的特点发现&#xff0c;其左下角和右上角可以看作一个“二叉搜索树的根节…

C++ 补充之常用遍历算法

C遍历算法和原理 C标准库提供了丰富的遍历算法&#xff0c;涵盖了各种不同的功能。以下是一些常见的C遍历算法以及它们的概念和原理的简要讲解&#xff1a; for_each&#xff1a;对容器中的每个元素应用指定的函数。 概念&#xff1a;对于给定的容器和一个可调用对象&#xff…

Docker 常用操作命令备忘

Docker 一旦设置好了环境&#xff0c;日常就只要使用简单命令就可以运行和停止。 于是&#xff0c;我每次用的时候&#xff0c;都想不起来一些关键性的命令到底怎么用&#xff0c;特此记录。 一、镜像管理 从公有仓库拉取镜像 &#xff08;对于使用苹果电脑 M1/M2/M3 芯片的 …

[源码分析]webrtc音频流从接收到播放的关键流程

如图所示&#xff0c;音频流从接收到播放的核心关键流程和执行线程。 neteq中对音频流的RTP数据包进行了处理和解码操作。同时数据出现了跨线程的投递。 后面有空补上核心对象之间的关系图。 后面将添加对neteq模块的细节分析。

【.NET Core】深入理解IO之File类

【.NET Core】深入理解IO之File类 文章目录 【.NET Core】深入理解IO之File类一、概述二、File类2.1 File.AppendAllLines方法2.2 File.AppendAllText方法2.3 File.Copy 方法2.4 File.Create 方法2.5 File.Decrypt(String) 方法2.6 File.Delete(String) 方法2.7 File.Move 方法…

18 SpringMVC实战

18 SpringMVC实战 1. 课程介绍2. Spring Task定时任务1. 课程介绍 2. Spring Task定时任务 package com.imooc.reader.task

安全防御-第六次

内容安全 攻击可能只是一个点&#xff0c;防御需要全方面进行 DFI和DPI技术--- 深度检测技术 DPI --- 深度包检测技术--- 主要针对完整的数据包&#xff08;数据包分片&#xff0c;分段需要重组&#xff09;&#xff0c;之后对数据包的内容进行识别。&#xff08;应用层&…

NerfStudio安装及第一个场景重建

NerfStudio文档是写在windows和linux上安装&#xff0c;本文记录Linux安装的过程&#xff0c;且我的cuda是11.7 创建环境 conda create --name nerfstudio -y python3.8 conda activate nerfstudio python -m pip install --upgrade pip Pytorch要求2.0.1之后的,文档推荐cud…

CSS——PostCSS简介

文章目录 PostCSS是什么postCSS的优点补充&#xff1a;polyfill补充&#xff1a;Stylelint PostCSS架构概述工作流程PostCSS解析方法PostCSS解析流程 PostCSS插件插件的使用控制类插件包类插件未来的CSS语法相关插件后备措施相关插件语言扩展相关插件颜色相关组件图片和字体相关…

【ArcGIS】基本概念-空间参考与变换

ArcGIS基本概念-空间参考与变换 1 空间参考与地图投影1.1 空间参考1.2 大地坐标系&#xff08;地理坐标系&#xff09;1.3 投影坐标系总结 2 投影变换预处理2.1 定义投影2.2 转换自定义地理&#xff08;坐标&#xff09;变换2.3 转换坐标记法 3 投影变换3.1 矢量数据的投影变换…

广和通发布基于MediaTek T300平台的RedCap模组FM330系列及解决方案

世界移动通信大会MWC 2024期间&#xff0c;广和通发布基于MediaTek T300平台的RedCap模组FM330系列&#xff0c;加速5G-A繁荣发展。FM330系列及其解决方案采用全球先进RedCap方案&#xff0c;满足移动宽带和工业互联对高能效的需求。 广和通FM330系列采用全球首款6nm制程且集成…

配置与管理Samba服务器

配置与管理samba服务器 1&#xff0c;作用&#xff1a;可以使用户在异构网络操作系统之间进行文件系统共享 2&#xff0c;**SMB协议&#xff1a;**主要是作为Microsoft网络的通讯协议&#xff1b;一般端口使用为139&#xff0c;445。 3&#xff0c;功能&#xff1a;1&#x…

SpringMVC 学习(九)之拦截器

目录 1 拦截器介绍 2 创建一个拦截器类 3 配置拦截器 1 拦截器介绍 在 SpringMVC 中&#xff0c;拦截器 (Interceptor) 是一种用于拦截 HTTP 请求并在请求处理之前或之后执行自定义逻辑的组件。拦截器可以用于实现以下功能&#xff1a; 权限验证&#xff1a;在请求处理之前…

Tuning Language Models by Proxy

1、写作动机&#xff1a; 调整大语言模型已经变得越来越耗资源&#xff0c;或者在模型权重是私有的情况下是不可能的。作者引入了代理微调&#xff0c;这是一种轻量级的解码时算法&#xff0c;它在黑盒 大语言模型 之上运行&#xff0c;以达到直接微调模型的结果&#xff0c;但…

MSSQL 获取表对应的列明,备注,字段类型

旧系统代码CV多了想解放一下双手写个代码生成器&#xff0c;这时候就需要获取到表的某一些信息了 SELECT a.NAME AS colname,CONCAT(UPPER(SUBSTRING(b.name, 1, 1)), LOWER(SUBSTRING(b.name, 2,LEN(b.name)-1))) AS typename,a.length AS length,a.scale AS scale, a.prec A…

《opencv实用探索·二十二》支持向量机SVM用法

1、概述 在了解支持向量机SVM用法之前先了解一些概念&#xff1a; &#xff08;1&#xff09;线性可分和线性不可分 如果在一个二维空间有一堆样本&#xff0c;如下图所示&#xff0c;如果能找到一条线把这两类样本分开至线的两侧&#xff0c;那么这个样本集就是线性可分&#…