前言

react-router针对不同的使用场景衍生了不同的路由包，RN项目用react-router-native，web项目用react-router-dom。并且，不需要再重复引入react-router了。我搭建的是web项目环境，所以用的是react-router-dom。

本节代码是基于开始一个React项目（一）一个最简单的webpack配置和开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新搭建的环境开始的。

前端路由

<srcipt>alert(1)</script>

开始今天的话题之前，让我们先来了解一下前端路由，Ajax诞生以后，解决了每次用户操作都要向服务器端发起请求重刷整个页面的问题，但随之而来的问题是无法保存Ajax操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：

hash, hash原本的作用是为一个很长的文档页添加锚点信息，它自带不改变url刷新页面的功能，所以自然而然被用在记录Ajax操作状态中了。

history, 应该说history是主流的解决方案，浏览器的前进后退用的就是这个，它是window对象下的，以前的history提供的方法只能做页面之间的前进后退，如下：

history.go(number|URL)可加载历史列表中的某个具体的页面

history.forward()可加载历史列表中的下一个 URL

history.back()可加载历史列表中的前一个 URL

为了让history不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5新增了三个方法，其中两个是在history对象里的：

history.pushState(state, title, url)

添加一条历史记录， state用于传递参数，可以为空。title是设置历史记录的标题，可以为空。url是历史记录的URL，不可以为空。

history.replaceState(state, title, url)

将history堆栈中当前的记录替换成这里的url，参数同上。

还有一个事件在window对象下：

window.onpopstate()监听url的变化，会忽略hash的变化（hash变化有一个onhashchange事件），但是前面的两个事件不会触发它。

好了，到这里你大概猜到了单页面应用或者Ajax操作记录状态用的就是hash和h5增加的history API，这就是react-router-dom扩展的路由实现，也是web应用最常用的两种路由。

作者：大柚子08

链接：https://www.jianshu.com/p/875225b2ec90

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。