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.hqwc.cn/news/496359.html

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

相关文章

python:xml.etree.ElementTree 读 Freeplane.mm文件,生成测试案例.csv文件

Freeplane 是一款基于 Java 的开源软件&#xff0c;继承 Freemind 的思维导图工具软件&#xff0c;它扩展了知识管理功能&#xff0c;在 Freemind 上增加了一些额外的功能&#xff0c;比如数学公式、节点属性面板等。 强大的节点功能&#xff0c;不仅仅节点的种类很多&#xf…

LTD264次升级 | 对接AsiaPay • 人民币买外币商品 •知识付费订单可关闭 • 专栏支持VIP免支付购买

​ 1、对接AsiaPay第三方支付平台&#xff0c;支持人民币买外币商品&#xff1b; 2、知识付费购买优化 3、账号绑定的微信号可解除绑定&#xff1b; 4、其他已知问题修复与优化&#xff1b; 01 商城 1) 新增海外跨境支付系统AsiaPay 在本次升级中&#xff0c;商城支付系统新增…

面试笔记系列四之SpringBoot+SpringCloud基础知识点整理及常见面试题

什么是 Spring Boot&#xff1f; Spring Boot 是 Spring 开源组织下的子项目&#xff0c;是 Spring 组件一站式解决方案&#xff0c;主要是简化了使用 Spring 的难度&#xff0c;简省了繁重的配置&#xff0c;提供了各种启动器&#xff0c;开发者能快速上手。 Spring Boot 有哪…

WEB服务器-Tomcat(黑马学习笔记)

简介 服务器概述 服务器硬件 ● 指的也是计算机&#xff0c;只不过服务器要比我们日常使用的计算机大很多。 服务器&#xff0c;也称伺服器。是提供计算服务的设备。由于服务器需要响应服务请求&#xff0c;并进行处理&#xff0c;因此一般来说服务器应具备承担服务并且保障…

ubuntu+QT+ OpenGL环境搭建和绘图

一&#xff0c;安装OpenGL库 安装OpenGL依赖项&#xff1a;运行sudo apt install libgl1-mesa-glx命令安装OpenGL所需的一些依赖项。 安装OpenGL头文件&#xff1a;运行sudo apt install libgl1-mesa-dev命令来安装OpenGL的头文件。 安装GLUT库&#xff1a;GLUT&#xff08;Ope…

Ubuntu18.04 系统上配置并运行SuperGluePretrainedNetwork(仅使用CPU)

SuperGlue是Magic Leap在CVPR 2020上展示的研究项目&#xff0c;它是一个图神经网络&#xff08;Graph Neural Network&#xff09;和最优匹配层&#xff08;Optimal Matching layer&#xff09;的结合&#xff0c;训练用于对两组稀疏图像特征进行匹配。这个项目提供了PyTorch代…

Nginx服务优化与防盗链配置

一.优化Nginx的相关措施 1.优化网页访问速度 &#xff08;1&#xff09;在可重启状态下&#xff0c;为避免同一客户端长时间占用连接&#xff0c;造成资源浪费&#xff0c;可以在http段设置连接超时参数keepalived_timeout实现控制连接访问时间 &#xff08;2&#xff09;当…

【架构笔记1】剃刀思维-如无必要,勿增实体

欢迎来到文思源想的架构空间&#xff0c;前段时间博主做了一个工作经历复盘&#xff0c;10年开发路&#xff0c;走了不少弯路&#xff0c;也算积累了不少软件开发、架构设计的经验和心得&#xff0c;确实有必要好好盘一盘&#xff0c;作为个人的总结&#xff0c;同时也留给有缘…

哪个牌子的电视盒子好用?2024超强电视盒子排名

最近很多朋友问我电视盒子的相关问题&#xff0c;就目前来说&#xff0c;电视盒子的地位依然是不可取代的。我近来要发布的测评内容是哪个牌子的电视盒子好用&#xff0c;耗时两周进行对比后整理了电视盒子排名&#xff0c;看看哪些电视盒子是最值得入手的吧。 NO.1——泰捷新品…

milvus upsert流程源码分析

milvus版本:v2.3.2 整体架构: Upsert 的数据流向: 1.客户端sdk发出Upsert API请求。 import numpy as np from pymilvus import (connections,Collection, )num_entities, dim 4, 3print("start connecting to Milvus") connections.connect("default",…

AD9851——FPGA调试(并行模式)

AD9851——FPGA调试&#xff08;并行模式&#xff09; 工程功能&#xff1a;使用FPGA来调试AD9851芯片&#xff0c;使用的是并行模式 芯片手册&#xff1a;AD9851 CMOS 180 MHz DDS/DAC Synthesizer Data Sheet (Rev. D) (analog.com) 管脚功能 管脚名称管脚功能D0-D78位数据输…

水库安全监测方案(福建地区水库安全监测案例分享)

我司星创易联最近在福建省受到了一个水库安全监测系统项目的委托。该水库位于福建中部山区,作为该地区的重要防洪与供水工程,对下游数十万人的生活产生重大影响。但是因为水库附近地质情况复杂,水库大坝在多次洪水冲击下出现一定病害,亟须全面加强对水库大坝安全状况的监测,以确…