1、react-router4

  是一个 react 组件

  通过和 location / histroy 结合,来显示页面不同URL对应显示不同的组件

  其中包含了三种路由。hash / boswer 等

2、react-router基本原理

  要对 history 进行解析和封装

  要对 history/location 的改变进行监听

  当 history/locaiton 改变触发 组件的路由检测

  最后对应的渲染匹配的组件

3、实现

  根据以上的分析。

  我们可以开始实现基础模型代码

  

  创建要给 Router.js 组件

  this.state = {
children: null
}
// 这里是我们要渲染的子组件
// 匹配好的组件组装后显示

  

   componentWillMount() {
let {children} = this.props
const {pathnpame} = window.location
children = this.checkRouter(children, pathname)
this.setState({
children
})
}
// 因为是模型代码
// 所以我之写初次进入的代码
// 在这里我们拦截 componentWillMount
// 根据 pathnpame ,children 实现检测和匹配
// checkRouter 匹配检测函数

  

  function checkRouter(childrens, pathname) {
childrens.forEach((item, index) => {
const {props, type} = item
if (Object.prototype.toString.call(type) == '[object Function]' && type.name == 'Route') {
let {extra, path, children} = props
console.log(item)
if (path !== pathname && !extra) {
childrens[index].props.children= null
} else {
if (new RegExp(`^${path}`).test(pathname)) {
let {children} = props
if (Object.prototype.toString.call(children) == '[object Array]') {
childrens[index].props.children = checkRouter(children, pathname)
}
} else {
childrens[index].props.children= null
}
}
} else {
let {children} = props
if (Object.prototype.toString.call(children) == '[object Array]') {
childrens[index].props.children = checkRouter(children, pathname)
}
} })
return childrens
}

  

  // 这里是匹配具体的规则

  // 代码不多,自己理解吧

  在创建一个 route.js

  route.js 只要实现返回 子组件就 OK 了

4、调用

            <Router>
<div>1</div>
<Text>
<div>3</div>
<Route path='/test2'>7</Route>
</Text>
<Route path='/test'>4</Route>
<Route extra path='/switch'>
<div>2</div>
<Route path='/switch/one'>5</Route>
<Route path='/switch/two'>
<div>6</div>
</Route>
</Route>
</Router>

  

5、完成

有什么问题可以留言回复哦!!!

精通react之react-router4源码分析(100代码实现router功能)的更多相关文章

  1. React事件杂记及源码分析

    前提 最近通过阅读React官方文档的事件模块,发现了其主要提到了以下三个点  调用方法时需要手动绑定this  React事件是一种合成事件SyntheticEvent,什么是合成事件?  事件属性 ...

  2. Hadoop RCFile存储格式详解(源码分析、代码示例)

    RCFile   RCFile全称Record Columnar File,列式记录文件,是一种类似于SequenceFile的键值对(Key/Value Pairs)数据文件.   关键词:Reco ...

  3. 源码分析 | 手写mybait-spring核心功能(干货好文一次学会工厂bean、类代理、bean注册的使用)

    作者:小傅哥 博客:https://bugstack.cn - 汇总系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言介绍 一个知识点的学习过程基本分为:运行helloworld ...

  4. Vue.js 源码分析(一) 代码结构

    关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View ...

  5. jQuery 源码分析(一) 代码结构

    jQuery是一个Javascript库,它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象.这一特点使得JQuery的代码无比优雅,而且有强大的选择器 ...

  6. 朴素贝叶斯算法源码分析及代码实战【python sklearn/spark ML】

    一.简介 贝叶斯定理是关于随机事件A和事件B的条件概率的一个定理.通常在事件A发生的前提下事件B发生的概率,与在事件B发生的前提下事件A发生的概率是不一致的.然而,这两者之间有确定的关系,贝叶斯定理就 ...

  7. Java入门到精通——框架篇之Spring源码分析Spring两大核心类

    一.Spring核心类概述. Spring里面有两个最核心的类这是Spring实现最重要的部分. 1.DefaultListableBeanFactory 这个类位于Beans项目下的org.spri ...

  8. jquery1.7.2的源码分析(六)基本功能

    jQuery.fn.extend({ attr: function( name, value ) { return jQuery.access( this, jQuery.attr, name, va ...

  9. epoll源码分析(基于linux-5.1.4)

    API epoll提供给用户进程的接口有如下四个,本文基于linux-5.1.4源码详细分析每个API具体做了啥工作,通过UML时序图理清内核内部的函数调用关系. int epoll_create1( ...

随机推荐

  1. java垃圾回收及gc全面解析(全面覆盖cms、g1、zgc、openj9)

    一般来说,gc的停顿时间和活跃对象的堆大小成比例,视gc线程的数量,每1GB可能会停顿1-3秒,且cpu数量通常和gc呈现阿姆达尔定律(Amdahl’s Law),而非我们直观计算的线性变化.如下: ...

  2. git crate patch and check&apply patch(八)

    root@vmuer-VirtualBox:/opt/myProject# git format-patch master0001-add-c.c.patch root@vmuer-VirtualBo ...

  3. AsyncAPI 几个方便的工具

    AsyncAPI 类似openapi 也提供了一些周边工具 editor 类似openapi 的,但是目前官方已经不推荐使用了,推荐使用playground,以下是构建一个容器镜像 clone 代码 ...

  4. 鸿蒙OS还有机会吗?

    鸿蒙最初的定位是手机操作系统,那在市场已饱和.生态已成熟,Android地位已牢不可破的当下,能成功是小概率事件,就像PC时代无法撼动Windows地位一样. 好在鸿蒙调整定位定义为面向未来的IOT操 ...

  5. 第04组Alpha事后诸葛亮

    一.组长博客:地址 二.Postmortem模板 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们要解决的问题是让大学生可以通过福鱼网站将暂时无 ...

  6. 第02组 Alpha冲刺(4/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  7. SSL证书创建与部署

    SSL证书简介SSL证书创建SSL证书部署-NginxSSL证书部署-ApacheSSL证书部署-Tomcat SSL简介以及发展SSL协议原理SSL应用场景 SSL简介以及发展传输层安全性协议,以及 ...

  8. gethostname、gethostbyname

    gethostname():返回本地主机的标准主机名 原型: #include<unistd.h> int gethostname(char *name, size_t len); 参数说 ...

  9. AttributeError: module 'pytest' has no attribute 'allure'

    解决 pip3 uninstall pytest-allure-adaptor pip3 install allure-pytest 参考: https://www.cnblogs.com/lansa ...

  10. Web 开发中 文件上传 是出现的:java.io.FileNotFoundException: (文件名、目录名或卷标语法不正确。)

    <span style="font-family: Arial, Helvetica, sans-serif; "> </span> <span st ...