react-router 的理解：

1) react 的一个插件库
2) 专门用来实现一个 SPA 应用
3) 基于 react 的项目基本都会用到此库

SPA  的理解：

1) 单页 Web 应用（single page web application，SPA）
2) 整个应用只有一个完整的页面
3) 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
4) 当点击路由链接时, 只会做页面的局部更新
5) 数据都需要通过 ajax 请求获取, 并在前端异步展现

路由的理解：

1) 什么是路由?
　　a. 一个路由就是一个映射关系(key:value)
　　b. key 为路由路径, value 可能是 function/component
2) 路由分类
　　a. 后台路由: node 服务器端路由, value 是 function, 用来处理客户端提交的请求并返
回一个响应数据

　　b. 前台路由: 浏览器端路由, value 是 component, 当请求的是路由 path 时, 浏览器端前没有发送 http 请求, 但界面会更新显示对应的组件

3) 后台路由
　　a. 注册路由: router.get(path, function(req, res))
　　b. 当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来
处理请求, 返回响应数据
4) 前端路由
　　a. 注册路由: <Route path="/about" component={About}>
　　b. 当浏览器的 hash 变为#about 时, 当前路由组件就会变为 About 组件

前端路由的实现

1) history 库
　　a. 网址: https://github.com/ReactTraining/history
　　b. 管理浏览器会话历史(history)的工具库
　　c. 包装的是原生 BOM 中 window.history 和 window.location.hash
2) history API
　　a. History.createBrowserHistory(): 得到封装 window.history 的管理对象
　　b. History.createHashHistory(): 得到封装 window.location.hash 的管理对象
　　c. history.push(): 添加一个新的历史记录
　　d. history.replace(): 用一个新的历史记录替换当前的记录
　　e. history.goBack(): 回退到上一个历史记录
　　f. history.goForword(): 前进到下一个历史记录
　　g. history.listen(function(location){}): 监视历史记录的变化

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>history test</title>

</head>

<body>

<p><input type="text"></p>

<a href="/test1" onclick="return push('/test1')">test1</a><br><br>

<button onClick="push('/test2')">push test2</button><br><br>

<button onClick="back()">回退</button><br><br>

<button onClick="forword()">前进</button><br><br>

<button onClick="replace('/test3')">replace test3</button><br><br>

<script type="text/javascript"

src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>

<script type="text/javascript">

let history = History.createBrowserHistory() // 方式一

// history = History.createHashHistory() // 方式二

// console.log(history)

function push (to) {

history.push(to)

return false

}

function back() {

history.goBack()

}

function forword() {

history.goForward()

}

function replace (to) {

history.replace(to)

}

history.listen((location) => {

console.log(' 请求路由路径变化了', location)

})

react-router4 介绍的更多相关文章

  1. React 简单介绍

    React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...

  2. React入门介绍（1）-ReactDOM.render()等基础

    React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...

  3. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  4. vue和react的介绍

    这几年前端框架发展的不错,出了不少框架,像微软自己的knockoutjs,angular,vue和最近比较火的react等,之前我有写过前两者的相关文章,今天主要说一下后两者. 介绍 是一个用于构建用 ...

  5. client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

    [本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~(￣▽￣) ...

  6. 36.React基础介绍——2019年12月24日

    2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...

  7. React入门介绍（2）- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  8. React组件介绍与使用（父传子、子传父、兄弟传）

    1.创建组件的方法     1.1.函数式无状态组件 1.1.1.语法 1 function myComponent(props) { 2 return 3 <div>Hello {pro ...

  9. React Hooks介绍和环境搭建（一）

    React Hooks 简介 2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏.React Hooks就是用函数的形式代替原来的继承类的形式,并且 ...

  10. [web前端] react router4.0 登录后返回之前浏览页面（回到来源页）

    本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...

随机推荐

  1. MinkowskiEngine实用函数和类

    MinkowskiEngine实用函数和类 sparse_quantize MinkowskiEngine.utils.sparse_quantize(coords, feats=None, labe ...

  2. 多级中间表示概述MLIR

    多级中间表示概述MLIR MLIR项目是一种构建可重用和可扩展的编译器基础结构的新颖方法.MLIR旨在解决软件碎片,改善异构硬件的编译,显着降低构建特定于域的编译器的成本以及帮助将现有编译器连接在一起 ...

  3. C#后台定义一个DataTable并手动写入静态数据(测试数据)

    //创建一个DataTable,并为之添加数据(自定义DataTable) DataTable dtz = new DataTable(); //添加Table中的列 DataColumn dc1 = ...

  4. 【题解】【洛谷 P1967】 货车运输

    目录 洛谷 P1967 货车运输 原题 题解 思路 代码 洛谷 P1967 货车运输 原题 题面请查看洛谷 P1967 货车运输. 题解 思路 根据题面,假设我们有一个普通的图: 作图工具:Graph ...

  5. 密码学系列之:feistel cipher

    密码学系列之:feistel cipher 简介 feistel cipher也叫做Luby–Rackoff分组密码,是用来构建分组加密算法的对称结构.它是由德籍密码学家Horst Feistel在I ...

  6. 三、DNS子域授权

    前提:准备两台虚拟机:父域: www.tedu.cn(虚拟机A)子域:www.bj.tedu.cn(虚拟机B) 一.在两台虚拟机上安装域名解析软件 root@pc207 ~]# yum -y inst ...

  7. css基本内容笔记（学习整理）

    一.css简介 1.什么是css 层叠样式表. 层叠:层层叠加,若果有冲突应用优先级高,不冲突的部分共同作用 样式表:就是css属性样式的集合: 2.作用 a.修饰html,使得html样式更好看 b ...

  8. 「模拟8.23」阴阳 DP

    对于此题的性质我们考虑DP 分四种情况 黑色块在右侧单调降,单调升 还有在左侧 另外我们这样可能会记重,所以还要将重复记过的也就是边界线是横的和竖的 然后还要将全白全黑加上 1 #include< ...

  9. DOS命令行（9）——wmic-系统管理命令行工具

    wmic 介绍与语法 WMI(Windows Management Instrumentation,Windows 管理规范)是一项核心的 Windows 管理技术:用户可以使用 WMI 管理本地和远 ...

  10. noip模拟10[入阵曲·将军令·星空](luogu)

    对于这次考试来说,总体考得还是不错的 就是有一个小问题,特判一定要判对,要不然和不判一样,甚至错了还会挂掉30分 还有一个就是时间分配问题,总是在前几个题上浪费太多时间,导致最后一个题完全没有时间思考 ...