React@16.x(46)路由v5.x(11)源码(3)- 实现 Router

目录

  • 1,Router 的结构
  • 2,实现
    • 2.1,react-router
      • 1,matchPath.js
      • 2,Router.js
      • 3,RouterContext.jsx
      • 4,index.jsx
    • 2.2,react-router-dom
      • BrowserRouter.jsx
      • index.jsx

1,Router 的结构

1,react-router 用于注入 history 上下文对象,但 history 对象是别人传递给它的。

2,react-router-dom 使用了 react-router,并传递创建 history 对象。

大致如下:

1,react-router-dom.js

import { createBrowserHistory } from "history"
import { Router } from "./react-router"export default class BrowserRouter extends Component {history = createBrowserHistory(this.props)render() {return <Router history={this.history}>{this.props.children}</Router>}
}

2,react-router.js

export default class Router extends Component {ctxValue = { //上下文中对象history: {},location : {},match : {},}render() {return <ctx.Provider value={this.ctxValue}>{this.props.children}</ctx.Provider>}
}

3,其他组件使用:

import { BrowserRouter as Router } from "./react-router-dom";export default function App() {return <Router></Router>
}

2,实现

项目目录

react-router-- index.js-- matchPath.js-- Router.js-- RouterContext.js
react-router-dom-- index.js-- BrowserRouter.js

2.1,react-router

1,matchPath.js

用于获取并组装 match 对象,参考 这篇文章。

2,Router.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import ctx from "./RouterContext";
import matchPath from "./matchPath";export class Router extends Component {static propTypes = {history: PropTypes.object.isRequired,children: PropTypes.node,};state = {location: this.props.history.location, // location 作为状态,是因为切换路由时会发生变化。};componentDidMount() {this.unListen = this.props.history.listen((nextLocation, action) => {this.props.history.action = action;this.setState({location: nextLocation,});});}componentWillUnmount() {this.unListen();}ctxValue = {};render() {this.ctxValue.history = this.props.history;this.ctxValue.location = this.state.location;this.ctxValue.match = matchPath("/", this.state.location.pathname);return <ctx.Provider value={this.ctxValue}>{this.props.children}</ctx.Provider>;}
}

3,RouterContext.jsx

提供上下文对象。

import { createContext } from "react";const context = createContext();
context.displayName = "Router"; // 在 React 插件调试时,显示的名字。export default context;

4,index.jsx

export * from "./Router";

2.2,react-router-dom

BrowserRouter.jsx

import React, { Component } from "react";
import { createBrowserHistory } from "history";
import { Router } from "../react-router";export class BrowserRouter extends Component {history = createBrowserHistory();render() {return <Router history={this.history}>{this.props.children}</Router>;}
}

index.jsx

export * from "./BrowserRouter";

接下文实现 Route


以上。

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

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

相关文章

编译libvlccpp

首先下载vlc sdk https://get.videolan.org/vlc/3.0.9.2/win64/vlc-3.0.9.2-win64.7z Cmake 生成libvlccpp vs2022工程文件 编译libvlccpp 编译出错需修改代码 错误信息&#xff1a; \VLC\sdk\include\vlc/libvlc_media.h(368): error C2065: “libvlc_media_read_cb”: 未…

rabbitmq消息队列提出的问题(个人想法)

目录 1.消息队列顺序1.交换机的作用 2.消息队列中为什么有消息缓冲区的存在 如果不存在会怎么样消息缓冲区的存在原因不存在消息缓冲区的后果 3.那内存与磁盘之间存在缓冲区有什么作用一、减少磁盘I/O次数二、提高数据传输效率三、减少对CPU的占用四、增强系统稳定性与可靠性 4…

老师家访的主要内容

在教育的广阔天地中&#xff0c;家访无疑是一座连接学校与家庭的桥梁。为何要进行家访&#xff1f;这不仅仅是一个简单的问题&#xff0c;它背后蕴含着教育者对孩子们成长环境的深切关怀。作为一位教师&#xff0c;我深知家访的重要性&#xff0c;它不仅能够让我更全面地了解学…

【回溯算法经典题目解析】

1. 什么是回溯算法 回溯算法是⼀种经典的递归算法&#xff0c;通常用于解决组合问题、排列问题和搜索问题等。 回溯算法的基本思想&#xff1a;从一个初始状态开始&#xff0c;按照⼀定的规则向前搜索&#xff0c;当搜索到某个状态⽆法前进时&#xff0c;回退到前⼀个状态&am…

Linux下的蓝牙开发

参考&#xff1a; bluetooth在linux应用开发 - yuxi_o - 博客园 (cnblogs.com) linux下蓝牙开发(bluez应用) - 那一抹风 - 博客园 (cnblogs.com) Linux内核蓝牙子系统架构 HCI层 / HCl连接 / L2CAP / BNEP / 蓝牙数据包接收架构_哔哩哔哩_bilibili 【蓝牙】一文入门Bluez的…

cesium 聚合

cesium 聚合(下面附有源码) 示例代码 <html lang="en"><head><!-- Use correct character set. -->

【智能算法】目标检测算法

目录 一、目标检测算法分类 二、 常见目标检测算法及matlab代码实现 2.1 R-CNN 2.1.1 定义 2.1.2 matlab代码实现 2.2 Fast R-CNN 2.2.1 定义 2.2.2 matlab代码实现 2.3 Faster R-CNN 2.3.1 定义 2.3.2 matlab代码实现 2.4 YOLO 2.4.1 定义 2.4.2 matlab代码实现…

电信NR零流量小区处理

【摘要】随着目前网络建设逐步完善&#xff0c;5G用户的不断发展&#xff0c;针对零流量小区的分析及处理存在着必要性&#xff0c;零流量小区的出现既是用户分布及行为的直观体现&#xff0c;也是发展用户的一个指引&#xff0c;同时也能发现设备的一些故障。一个站点的能够带…

【数值计算库-超长笔记】Python-Mpmath库:高精度数值计算

原文链接&#xff1a;https://www.cnblogs.com/aksoam/p/18279394 更多精彩&#xff0c;关注博客园主页&#xff0c;不断学习&#xff01;不断进步&#xff01; 我的主页 csdn很少看私信&#xff0c;有事请b站私信 博客园主页-发文字笔记-常用 有限元鹰的主页 内容&#xf…

燃料电池混合电源的能量管理系统

这个例子显示了燃料电池混合电源的能量管理系统。 这个例子展示了燃料电池混合电源的能量管理系统。 电路描述 本文给出了基于燃料电池的多电动飞机应急动力系统的仿真模型。随着MEA中起落架和飞控系统的电气化程度的提高&#xff0c;常规应急电源系统(冲压式空气涡轮或空气驱…

希尔伯特基定理

【引理1】&#xff08;Dickson定理&#xff09; 对于 ∀ A ⊂ N n \forall A \subset \mathbb{N}^{n} ∀A⊂Nn&#xff0c; ∃ \exists ∃有限非空集 B ⊂ A B \subset A B⊂A&#xff0c;使得 ⟨ x A ⟩ ⟨ x B ⟩ \left\langle x^{A} \right\rangle \left\langle x^{B} \ri…

代码随想录算法训练营第20天 | 题目: 235. 二叉搜索树的最近公共祖先 701.二叉搜索树中的插入操作 450.删除二叉搜索树中的节点

代码随想录算法训练营第20天 | 题目&#xff1a; 235. 二叉搜索树的最近公共祖先 701.二叉搜索树中的插入操作 450.删除二叉搜索树中的节点 文章来源&#xff1a;代码随想录 题目名称&#xff1a; 235. 二叉搜索树的最近公共祖先 给定一个二叉搜索树, 找到该树中两个指定节点的…

强对抗的SquidLoader针对中国企业发起攻击

2024 年 4 月下旬&#xff0c;研究人员观察到一些特别的钓鱼邮件附件&#xff0c;文件名为「华为工业级路由器相关产品介绍和优秀客户案例」。顺藤摸瓜发现一系列以中国企业/组织名称命名的恶意附件&#xff0c;如「中国移动集团XX分公司」、「嘉X智能科技」与「XX水利技术学院…

Centos7部署Mysql8.0超级详细教程,一看就会!

1、准备 下载 Mysql 安装包源信息,去到这个网址&#xff0c;https://dev.mysql.com/downloads/repo/yum/ 复制红色框的内容&#xff0c; 2、开始安装 # 以下所有操作建议切换到 root 用户后运行。。yum install wget -y# 将上面的复制内容粘贴到后面&#xff0c;格式&…

前端性能优化-实测

PageSpeed Insights 性能测试 今天测试网站性能的时候发现一个问题&#xff0c;一个h2标签内容为什么会占据这么长的渲染时间&#xff0c;甚至有阶段测到占据了7000多毫秒&#xff0c;使用了很多方法都不能解决&#xff0c;包括了修改标签&#xff0c;样式大小等&#xff0c;当…

在Spring Boot项目中引入本地JAR包的步骤和配置

在Spring Boot项目中&#xff0c;有时需要引入本地JAR包以便重用已有的代码库或者第三方库。本文将详细介绍如何在Spring Boot项目中引入本地JAR包的步骤和配置&#xff0c;并提供相应的代码示例。 1. 为什么需要本地JAR包 在开发过程中&#xff0c;可能会遇到以下情况需要使…

JAVA连接FastGPT实现流式请求SSE效果

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; 一、先看效果 真正实流式请求&#xff0c;SSE效果&#xff0c;SSE解释&am…

CentOS7环境下DataX的安装、使用及问题解决

DataX概述 DataX 是阿里巴巴开源的一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。 为了解决异构数据源同步问题&#xff0c;DataX将复杂的网状的同步链路变…

DNS解析过程及常见问题解决

DNS解析过程及常见问题解决 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 什么是DNS解析&#xff1f; 在计算机网络中&#xff0c;DNS&#xff08;Domain N…

什么是字符串常量池?如何利用它来节省内存?

字符串常量池是Java中一个非常重要的概念&#xff0c;尤其对于理解内存管理和性能优化至关重要。想象一下&#xff0c;你正在管理一家大型图书馆&#xff0c;每天都有无数读者来借阅书籍。 如果每本书每次借阅都需要重新印刷一本&#xff0c;那么图书馆很快就会陷入混乱&#…