ReactRouter是React的核心组件，主要是作为React的路由管理器，保持UI与URL同步，其拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理等。
描述React Router是建立在history对象之上的，简而言之一个history对象知道如何去监听浏览器地址栏的变化，并解析这个URL转化为location对象，然后router使用它匹配到路由，最后正确地渲染对应的组件，常用的history有三种形式： Browser History、Hash History、Memory History。
Browser HistoryBrowser History是使用React Router的应用推荐的history，其使用浏览器中的History对象的pushState、replaceState等API以及popstate事件等来处理URL，其能够创建一个像https://www.example.com/path这样真实的URL，同样在页面跳转时无须重新加载页面，当然也不会对于服务端进行请求，当然对于history模式仍然是需要后端的配置支持，用以支持非首页的请求以及刷新时后端返回的资源，由于应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问URL时就会返回404，所以需要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源时，则应该返回同一个index.html应用依赖页面，例如在Nginx下的配置。
location / { try_files $uri $uri/ /index.html; } Hash HistoryHash符号即#原本的目的是用来指示URL中指示网页中的位置，例如https://www.example.com/index.html#print即代表example的index.html的print位置，浏览器读取这个URL后，会自动将print位置滚动至可视区域，通常使用<a>标签的name属性或者<div>标签的id属性指定锚点。
通过window.location.hash属性能够读取锚点位置，可以为Hash的改变添加hashchange监听事件，每一次改变Hash，都会在浏览器的访问历史中增加一个记录，此外Hash虽然出现在URL中，但不会被包括在HTTP请求中，即#及之后的字符不会被发送到服务端进行资源或数据的请求，其是用来指导浏览器动作的，对服务器端没有效果，因此改变Hash不会重新加载页面。
ReactRouter的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图，从而动态加载与销毁组件，简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改，这也是SPA单页应用的特点，其所有的活动局限于一个Web页面中，非懒加载的页面仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS文件，一旦页面加载完成，SPA不会进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML，默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。
Memory History不会在地址栏被操作或读取，这就可以解释如何实现服务器渲染的，同时其也非常适合测试和其他的渲染环境例如React Native，和另外两种History的一点不同是我们必须创建它，这种方式便于测试。
const history = createMemoryHistory(location); 实现我们来实现一个非常简单的Browser History模式与Hash History模式的实现，因为H5的pushState方法不能在本地文件协议file://运行，所以运行起来需要搭建一个环境，使用webpack、Nginx、Apache等都可以，回到Browser History模式路由，能够实现history路由跳转不刷新页面得益与H5提供的pushState()、replaceState()等方法以及popstate等事件，这些方法都是也可以改变路由路径，但不作页面跳转，当然如果在后端不配置好的情况下路由改编后刷新页面会提示404，对于Hash History模式，我们的实现思路相似，主要在于没有使用pushState等H5的API，以及监听事件不同，通过监听其hashchange事件的变化，然后拿到对应的location.hash更新对应的视图。
<!-- Browser History --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Router</title> </head> <body> <ul> <li><a href="http://www.likecs.com/home">home</a></li> <li><a href="http://www.likecs.com/about">about</a></li> <div></div> </ul> </body> <script> function Router() { this.routeView = null; // 组件承载的视图容器 this.routes = Object.create(null); // 定义的路由 } // 绑定路由匹配后事件 Router.prototype.route = function (path, callback) { this.routes[path] = () => this.routeView.innerHTML = callback() || ""; }; // 初始化 Router.prototype.init = function(root, rootView) { this.routeView = rootView; // 指定承载视图容器 this.refresh(); // 初始化即刷新视图 root.addEventListener("click", (e) => { // 事件委托到root if (e.target.nodeName === "A") { e.preventDefault(); history.pushState(null, "", e.target.getAttribute("href")); this.refresh(); // 触发即刷新视图 } }) // 监听用户点击后退与前进 // pushState与replaceState不会触发popstate事件 window.addEventListener("popstate", this.refresh.bind(this), false); }; // 刷新视图 Router.prototype.refresh = function () { let path = location.pathname; console.log("refresh", path); if(this.routes[path]) this.routes[path](); else this.routeView.innerHTML = ""; }; window.Router = new Router(); Router.route("http://www.likecs.com/home", function() { return "home"; }); Router.route("http://www.likecs.com/about", function () { return "about"; }); Router.init(document, document.getElementById("routeView")); </script> </html> <!-- Hash History --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Router</title> </head> <body> <ul> <li><a href="#/home">home</a></li> <li><a href="#/about">about</a></li> <div></div> </ul> </body> <script> function Router() { this.routeView = null; // 组件承载的视图容器 this.routes = Object.create(null); // 定义的路由 } // 绑定路由匹配后事件 Router.prototype.route = function (path, callback) { this.routes[path] = () => this.routeView.innerHTML = callback() || ""; }; // 初始化 Router.prototype.init = function(root, rootView) { this.routeView = rootView; // 指定承载视图容器 this.refresh(); // 初始化触发 // 监听hashchange事件用以刷新 window.addEventListener("hashchange", this.refresh.bind(this), false); }; // 刷新视图 Router.prototype.refresh = function () { let hash = location.hash; console.log("refresh", hash); if(this.routes[hash]) this.routes[hash](); else this.routeView.innerHTML = ""; }; window.Router = new Router(); Router.route("#/home", function() { return "home"; }); Router.route("#/about", function () { return "about"; }); Router.init(document, document.getElementById("routeView")); </script> </html> 分析