当前位置: 首页 > news >正文

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;

相关文章:

  • 初学者如何学习python
  • leetcode 热题 100_三数之和
  • LeetCode——二叉树(Java)
  • 【Vue3】PostCss 适配
  • GO基本类型一些记录
  • Spring八股 常见面试题
  • 爆红提醒:ESLint: Parsing error: Unexpected token. Did you mean `{‘>‘}` or `gt;`?
  • Java如何添加批量添加水印
  • 【vue3】命令式组件封装,message封装示例;(函数式组件?)
  • 监听者的力量:探索观察者模式和spring使用
  • [NOIP2007 普及组] 纪念品分组--贪心算法
  • 论文里点击如图?-?如何跳转到图片的题注
  • 探秘SpringBoot启动流程:原理解析与自定义扩展
  • Mongodb基础(node.js版)
  • C2_W2_Assignment_吴恩达_中英_Pytorch
  • 网络传输文件的问题
  • Angular4 模板式表单用法以及验证
  • C++入门教程(10):for 语句
  • codis proxy处理流程
  • iOS | NSProxy
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • Js基础知识(四) - js运行原理与机制
  • JS数组方法汇总
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • KMP算法及优化
  • Mysql优化
  • Web标准制定过程
  • windows下使用nginx调试简介
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 关于for循环的简单归纳
  • 基于webpack 的 vue 多页架构
  • 模型微调
  • 前端面试题总结
  • 移动端解决方案学习记录
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • hi-nginx-1.3.4编译安装
  • 移动端高清、多屏适配方案
  • ​业务双活的数据切换思路设计(下)
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • ( 10 )MySQL中的外键
  • (day6) 319. 灯泡开关
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (二)WCF的Binding模型
  • (四) 虚拟摄像头vivi体验
  • (转)树状数组
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .NET牛人应该知道些什么(2):中级.NET开发人员
  • @Valid和@NotNull字段校验使用
  • [20161214]如何确定dbid.txt
  • [android] 看博客学习hashCode()和equals()
  • [C# WPF] 如何给控件添加边框(Border)?
  • [CF226E]Noble Knight's Path