react-router-dom的使用；react 路由实现的基本原理 和 浅谈前后端路由

react 路由学了好久，断断续续的，也开学了。忙这忙那。
呼呼 。终于学完这一章节了
内容有点多，5.1 的相关知识只是浅谈，需要深入了解可以找找其他博文。如果这里有不对请指正啦。

第五章 — react-router

5.1 相关知识

1. 浅谈网页发展

1.1后端渲染阶段

早期网页

早期网页是由 jsp/php 代码开发，基本是html和css

它的请求过程是输入网站后，发送到服务器，服务器会将完整的网页返回，也就是已经渲染完成的网页，包括一些图片资源等。

这个也就是后端渲染，即请求回来的即使渲染完成的一个网页，只有html和css

当前端有什么请求时，后端会根据请求找到对于的页面，根据需求渲染完成后再发送给游览器。

后端路由

根据请求路径服务器会找到对于的网页，这个映射处理的过程就是后端路由的工作过程

即后端路由是处理URL和页面之间的映射关系的

1.2 前后端分离阶段

Ajax的出现，有了前后端分离的开发模式，后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JS渲染到页面上

服务器分为了静态服务器和一个提供API（接口）的服务器；

当游览器发送请求到服务器时，它先发送到静态服务器，静态服务器根据路径，返回HTML和CSS和JS的代码的静态网页；

如果JS代码发送请求，那么请求会发送到提供API的服务器；它会返回数据，JS根据数据处理并渲染到页面

这个过程就是前端渲染，因为大部分数据是是前端渲染出来的，后端只负责发送数据；

1.3 单页面富应用阶段（SPA）：

SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则

SPA页面

它只有一个HTML页面

它也有一个静态服务器，和一个提供API服务的服务器，相比前后端分离阶段，它的静态服务器里的保存的页面更少，甚至只有一个

当你发送一个请求，静态服务器返回一个有全部静态网页的的网页，这个网页里面还有其他页面（页面组件），但是会根据请求情况显示。

点击页面内的链接不会刷新页面，但会局部刷新。

数据通过 ajax 请求获取，并且在前端异步展现。

前端路由

一个主页面包括很多页面，当你点击到其他页面时，不会发送到静态服务器，而是在本地跳转，那么就需要一个本地路由映射关系，那就是前端路由

前端路由的关键是当点击到其他页面时，URL改变但是网页不刷新，在本地进行跳转

2. 路由

什么是路由

路由是一个映射关系。键是路径，值是一个组件。

路由的分类

路由可分为前端路由和后端路由。

前端路由和后端路由以上有介绍到。

5.2 前端路由的基本原理

前端路由跳转时不需要向服务器发送请求 ，而是本地进行跳转。

实现前端路由的核心要求是更新 URL 但是整体页面不刷新，只进行局部刷新。

而实现这个要求有几个方法。

location.hash

location对象是 Window 对象的一个部分，可通过 window.location属性来访问。

location 对象有一些我们熟悉的属性。如 host ,href,honstname 等。

而我们这里需讨论的是 hash 属性

hash 属性可以设置和返回 URL 后的哈希值 。（包括 # 号）

// location.href = "www.abc.com/hwt.html#A/B"
location.hash  //  #A/B

location.hash = "C/D"
// URL 变为 ： www.abc.com/hwt.html#C/D

这个属性可以做到更新 URL ，但不会更新页面。

更新后可以返回更新前的 URL 。也就是之前的 URL 及页面状态会被会路由历史记录保留。

可以做一个尝试 ，点击网页 URL 栏， 可以修改URL ，在原本的 URL后加上#123 ， 或 # 加其他字符 页面是不会刷新的。然后点击左边的回退键，是可以返回更新前的URL的。

哈希值还有一个特点，不会发送给服务器。

location.replace("…#…")

location 上有一个方法 ，是 replace 方法

参数是URL字符串 。 会把当前的URL在路由历史记录删除，并代签它的位置。

注意： 传入的URL必须是基于原本的 URL ，只增加或修改了哈希值。否则页面会刷新。

// location.href = "www.abc.com/hwt.html"
// history.length = 1 
location.replace(