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. 1、java数据结构和算法---循环队列

    直接上代码: public class CircleArrayQueueLvcai { private int[] array; private int maxSize;//循环队列大小 privat ...

  2. （5）使用自定Web根目录

    调整 Web 站点 http://server0.example.com 的网页目录,要求如下: 1) 新建目录 /webroot,作为此站点新的网页文件根目录 # mkdir /webroot # ...

  3. UF_MTX 矩阵操作

    Open C   UF_MTX2_copyUF_MTX2_determinantUF_MTX2_identityUF_MTX2_initializeUF_MTX2_multiplyUF_MTX2_mu ...

  4. 浅谈lambda表达式&lt;最通俗易懂的讲解

    Java8发布已经有一段时间了,这次发布的改动比较大,很多人将这次改动与Java5的升级相提并论.Java8其中一个很重要的新特性就是lambda表达式,允许我们将行为传到函数中.想想看,在Java8 ...

  5. 聊一聊 Spring Boot 中 RESTful 接口设计规范

    在设计接口时,有很多因素要考虑,如接口的业务定位,接口的安全性,接口的可扩展性.接口的稳定性.接口的跨域性.接口的协议规则.接口的路径规则.接口单一原则.接口过滤和接口组合等诸多因素,本篇文章将简要分 ...

  6. 深入理解Spring的两大特征（IOC和AOP）

    一.spring 的优点? 1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很 ...

  7. JavaScript 实现：输出斐波那契数列

    问渠那得清如许,为有源头活水来. 想要保持自己的技术活力,最有效的手段就是通过不断地输入来提供足够的养分.我们也不必刻意追求高深的或者新鲜的知识点,通过对一个基础问题的全方位多维度解析,同样也会收获不 ...

  8. Java-Lambda相关使用介绍

    频繁使用的语句   Lambda又涉及到comparator和comparable区别(Comparable是实现comparable接口,实现后可以使用Collections.sort或Arrays ...

  9. 携程二面：讲讲 MySQL 中的 WAL 策略和 CheckPoint 技术

    前段时间我在准备暑期实习嘛,这是当时面携程的时候二面的一道问题,我一脸懵逼,赶紧道歉,不好意思不知道没了解过,面试官又解释说 redo log,我寻思着 redo log 我知道啊,WAL 是啥?给面 ...

  10. 11、nginx+tomcat+redis_session共享

    11.1.前言: 1.多个tomcat要一起协同工作可以考虑的方案如下: (1)使用tomcat自带的cluster方式,多个tomcat间自动实时复制session信息,配置起来很简单.但这个方案的 ...