目录

react-router依赖基础--history

react-router是如何实现URL与UI同步

一 react-router依赖基础--history

history是一个独立的第三方js库,可以用来兼容不同的浏览器、不同环境下对历史记录的管理。具体可以分为以下几类:

  • hashHistory:通常应用于老版本浏览器,主要通过hash来实现
  • browserHistory:通常应用于高版本浏览器,通过html5中的history来实现
  • memoryHistory:node环境中,主要存储在memory中

三种实现方法,都是创建了一个history对象,这里主要讲下前2个:

const history = {
length: globalHistory.length,
action: "props",
location: initalLocation,
createHref,
push, // 改变location
replace,
go,
goBack,
goForward,
block,
listen //监听路由变化
}

1 页面的跳转实现

BrowserHistory: pushState replactState

HashHistroy: location.hash location.replace

function push() {
createKey(); // 创建location的key,用于唯一标识该location,是随机生成的
if (BrowserHistory) {
globalHistory.pushState({ key, state }, null, href);
} else if (HashHistory) {
window.location.hash = path;
}
// 上报listener,更新state
} function replace() {
createKey();
if (BrowserHistory) {
globalHistory.replaceState( { key, state }, null, href);
} else if (HashHistory) {
window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
}
// 上报listener,更新state
}

2 页面回退

BrowserHistory: popstate

HashHistory: hashchange

function pop() {
if (BrowserHistory) {
window.addEventListener("popstate", routerChange);
} else if (HashHistory) {
window.addEventListener("hashChange", routerChange);
}
} function routerChange() {
const location = getDOMLocation(); //获取location
transitionManger.confirmTransitionTo(location, callback = () => { // 路由切换
transitionManager.notifyListeners(); // 上报listener
})
}

二 react-router是如何实现URL与UI同步

通过history实现一个简单地react-router

未完待更新。。。

我对于react-router路由原理的学习的更多相关文章

  1. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  2. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  3. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  4. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  5. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  6. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  7. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  8. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  9. Linux数据包路由原理、Iptables/netfilter入门学习

    相关学习资料 https://www.frozentux.net/iptables-tutorial/cn/iptables-tutorial-cn-1.1.19.html http://zh.wik ...

随机推荐

  1. tap事件的原理详解

    点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...

  2. hdu 1907 John (anti—Nim)

    John Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)http://acm.h ...

  3. NOIP 2014 提高组 Day2

    期望得分:100+60+30=190 实际得分:70+60+30=160 https://www.luogu.org/problem/lists?name=&orderitem=pid& ...

  4. ACM选修HUST1058(市赛题) Lucky Sequence 同余定理

    Description Edward  得到了一个长度为  N  的整数序列,他想找出这里面有多少个“幸运的”连续子序列.一个连续子序列被称为“幸运的”,当且仅当该子序列内的整数之和恰好是  K  的 ...

  5. windows安装zookeeper和kafka,flume

    一.安装JDK 过程比较简单,这里不做说明. 最后打开cmd输入如下内容,表示安装成功 二.安装zooeleeper 下载安装包:http://zookeeper.apache.org/release ...

  6. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

  7. 【转载】iPhone系统概览

    iPhone OS OverviewiPhone系统概览iPhone OS comprises the operating system and technologies that you use t ...

  8. Java 中的几种线程池这么用才是对的

    为什么要使用线程池 虽然大家应该都已经很清楚了,但还是说一下.其实归根结底最主要的一个原因就是为了提高性能. 线程池和数据库连接池是同样的道理,数据库连接池是为了减少连接建立和释放带来的性能开销.而线 ...

  9. php上传文件大小限制的方法详解

    打开php.ini,首先找到file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就 ...

  10. AngularJs 文件上传(实现Multipart/form-data 文件的上传)

    <!-- 上传yml文件 --> <div class="blackBoard" ng-show="vm.showUpop==true"> ...