React@16.x(47)路由v5.x(12)源码(4)- 实现 Route

目录

  • 1,原生 Route 的渲染内容
  • 2,实现

1,原生 Route 的渲染内容

对如下代码来说:

import { BrowserRouter as Router, Route } from "react-router-dom";
function News() {return <div>News</div>;
}function Goods() {return <div>Goods</div>;
}export default function App() {return (<Router><Route path="/page1" component={News}></Route><Route path="/page2" component={Goods}></Route></Router>);
}

React 插件展示的内容:

在这里插入图片描述

可以看到每个 Route 组件中,还会有一个 Router 上下文

这是因为,每个 Route 组件匹配的 match 对象不同,所以得再提供一次。除此之外,historylocation 这2个对象并没有发生变化。

2,实现

import React, { Component } from "react";
import ctx from "./RouterContext";
import matchPath from "./matchPath";export class Route extends Component {renderChildren = (ctx) => {const { children, render, component } = this.props;// children 无论是否匹配都会渲染,也可以是函数,if (children !== undefined && children !== null) {if (typeof children === "function") {return children(ctx);} else {return children;}}// 没有匹配到路径,同时 children 没有内容if (!ctx.match) {return null;}// render 属性if (typeof render === "function") {return render(ctx);}// 只有 component 属性有值if (component) {const Comp = component;return <Comp {...ctx}></Comp>;}return null;};matchRoute = (pathname) => {const { path, exact = false, strict = false, sensitive = false } = this.props;return matchPath(path || "/", pathname, {exact,strict,sensitive,});};/*** 上下文消费者函数* Route 组件中又会提供一个 Router 的上下文,* history 和 location 对象相同,match 对象会重新进行匹配。*/consumerFunc = (value) => {// 上下文对象定义在这里,当 Router 组件传递的上下文内容发生变化时,也会实时更新。const ctxValue = {history: value.location,location: value.location,match: this.matchRoute(value.location.pathname),};return <ctx.Provider value={ctxValue}>{this.renderChildren(ctxValue)}</ctx.Provider>;};render() {return <ctx.Consumer>{this.consumerFunc}</ctx.Consumer>;}
}

以上代码经过测试,和原生 Route 组件表现一致。


以上。

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

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

相关文章

【虚拟机】虚拟机网络无法访问问题【已解决】

【虚拟机】虚拟机无法上网问题【已解决】 问题探究解决方法法1&#xff1a;查看相关“网络服务”是否处于正常启动状态法2&#xff1a;重启网络法3&#xff1a;重新安装VMWare法4&#xff1a;使用NAT模式&#xff0c;每次打开win7都没连上网的解决办法 问题探究 安装了很多个虚…

上位机图像处理和嵌入式模块部署(mcu项目1:实现协议)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 这种mcu的嵌入式模块理论上都是私有协议&#xff0c;因为上位机和下位机都是自己开发的&#xff0c;所以只需要自己保证上、下位机可以通讯上&…

Feign 原理流程图练习-01

目录 作业: 老师给的参考流程图 要求 解答 知识扩展 Feign基础原理 接口定义 代理对象生成 请求调用 请求发送 响应处理 容错与熔断 总结 作业: 老师给的参考流程图 pdf版本 【金山文档 | WPS云文档】 Feign https://kdocs.cn/l/ctbagIyxN348 ​ 要求 结合上面…

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文&#xff0c;但是并没有真正自己实操过。现在对AOP有了更深一点的理解&#xff0c;就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁&#xff0c;单体应…

班迪录屏(Bandicam)7.0下载以及安装教程

最近有小伙伴私信我&#xff0c;问我有没有好用的录屏工具&#xff0c;今天给大家分享一个我一直在使用的录屏工具&#xff0c;也是解锁了V1P版本&#xff0c;绿色版打开就可以使用~ Bandicam录屏&#xff08;PC&#xff09; Bandicam录屏是一款专为捕捉屏幕精彩瞬间而设计的…

PHP家政服务预约单开版微信小程序系统源码

&#x1f3e0; —— 便捷生活&#xff0c;从指尖开始&#x1f4aa; &#x1f308;【开篇&#xff1a;家政新风尚&#xff0c;一键触达】 在忙碌的生活节奏中&#xff0c;你是否渴望拥有一个温馨、整洁的家&#xff0c;却又苦于找不到合适的家政服务&#xff1f;现在&#xff…

EXTI寄存器,AFIO的简洁,EXTI配置的流程

一&#xff0c;AFIO简介 AFIO是Alternate Function Input/Output 的缩写&#xff0c;表示复用功能IO&#xff0c;主要用于实现IO端口的复用功能以及外部中断的控制 STM32外设有很多I/O以及内置外设&#xff08;如12C&#xff0c;ADC,ISP,USART等&#xff09;。为节省引出管脚的…

初试成绩占比百分之70!计算机专硕均分340+!华中师范大学计算机考研考情分析!

华中师范大学&#xff08;Central China Normal University&#xff09;简称“华中师大”或“华大”&#xff0c;位于湖北省会武汉&#xff0c;是中华人民共和国教育部直属重点综合性师范大学&#xff0c;国家“211工程”、“985工程优势学科创新平台”重点建设院校&#xff0c…

PhysioLLM 个性化健康洞察:手表可穿戴设备实时数据 + 大模型

个性化健康洞察&#xff1a;可穿戴设备实时数据 大模型 提出背景PhysioLLM 图PhysioLLM 实现数据准备用户模型和洞察生成个性化数据总结和洞察是如何生成的&#xff1f; 解析分析 提出背景 论文&#xff1a;https://arxiv.org/pdf/2406.19283 虽然当前的可穿戴设备伴随应用&…

最近,被“AI”狠狠刷屏了......

最近&#xff0c;被“AI”狠狠刷屏了。 作为时下最热门的话题&#xff0c;AI画图、AI配音、AI写文案、AI做视频......AI在最近两年可谓是火遍全球。ChatGPT、Midjourney和SORA等技术不断涌现&#xff0c;不仅深刻改变着我们的生活方式&#xff0c;也推动了AI技术的飞速发展。 …

vue使用scrollreveal和animejs实现页面滑动到指定位置后再开始执行动画效果

效果图 效果链接&#xff1a;http://website.livequeen.top 介绍 一、Scrollreveal ScrollReveal 是一个 JavaScript 库&#xff0c;用于在元素进入/离开视口时轻松实现动画效果。 ScrollReveal 官网链接&#xff1a;ScrollReveal 二、animejs animejs是一个好用的动画库…

nvm安装以及idea下vue启动项目过程和注意事项

注意1&#xff1a;nvm版本不要太低&#xff0c;1.1.7会出现下面这个问题&#xff0c;建议1.1.10及其以上版本 然后安装这个教程安装nvm和node.js 链接: nvm安装教程&#xff08;一篇文章所有问题全搞定&#xff0c;非常详细&#xff09; 注意2&#xff1a;上面的教程有一步骤…

实现各平台确定性的物理碰撞

1.使用FixedUpdate而不是Update 1.物理运算&#xff0c;比如刚体运动系统的运算是通过固定的时间来驱动的。 2.再moba帧同步游戏中&#xff0c;15帧的固定调用差不多是网络那边的极限了&#xff0c;采用其他手段如平滑显示来提高画面的平滑度。 FixedUpdate是以一个固定的帧率…

开始尝试从0写一个项目--前端(一)

基础项目构建 创建VUE初始工程 确保自己下载了node.js和npm node -v //查看node.js的版本 npm -v //查看npm的版本 npm i vue/cli -g //安装VUE CLI 创建 以管理员身份运行 输入&#xff1a;vue ui 就会进入 点击创建 自定义项目名字&#xff0c;选择npm管理 结…

“工控机”是什么?和普通电脑有区别嘛!

在现代工业生产中,有一种特殊的计算机,它不像普通电脑那样被放置于明亮的办公室内,而是常常藏身于机器轰鸣、环境恶劣的工厂车间里,这就是工控机——工业控制计算机的简称。作为工业自动化领域不可或缺的核心设备,工控机不仅承载着监控与数据采集(SCADA)、过程控制、数据…

概率论与数理统计_下_科学出版社

contents 前言第5章 大数定律与中心极限定理独立同分布中心极限定理 第6章 数理统计的基本概念6.1 总体与样本6.2 经验分布与频率直方图6.3 统计量6.4 正态总体抽样分布定理6.4.1 卡方分布、t 分布、F 分布6.4.2 正态总体抽样分布基本定理 第7章 参数估计7.1 点估计7.1.1 矩估计…

上海-灵曼科技(面经)

上海-灵曼科技 hr电话面 个人简介 个人信息的询问 是否知道芋道框架 技术面 算法题 14. 最长公共前缀&#xff08;写出来即可&#xff09; 聊一下Docker Docker核心概念总结Docker实战 聊一下AOP Spring AOP详解 聊一下JWT JWT 基础概念详解JWT 身份认证优缺点分析 Spri…

使用React复刻ThreeJS官网示例——keyframes动画

最近在看three.js相关的东西&#xff0c;想着学习一下threejs给的examples。源码是用html结合js写的&#xff0c;恰好最近也在学习react&#xff0c;就用react框架学习一下。 本文参考的是threeJs给的第一个示例 three.js examples (threejs.org) 一、下载threeJS源码 通常我们…

【接口自动化测试】第四节.实现项目核心业务的单接口自动化测试

文章目录 前言一、登录单接口自动化测试 1.1 登录单接口文档信息 1.2 登录成功 1.3 登录失败&#xff08;用户名为空&#xff09;二、数据驱动的实现 2.1 json文件实现数据驱动三、课程添加单接口自动化测试 3.1 课程添加单接口文档信息 3.2 课程…

Promethuse-监控 Etcd

一、思路 Prometheus监控Etcd集群&#xff0c;是没有对应的exporter&#xff0c;而 由CoreOS公司开发的Operator&#xff0c;用来扩展 Kubernetes API&#xff0c;特定的应用程序控制器&#xff0c;它用来创建、配置和管理复杂的有状态应用&#xff0c;如数据库、缓存和监控系…