React基本原理——路由

路由可以简单理解为导航链接。
那么为什么需要路由呢？
简单来说，在导航栏链接，不希望产生页面跳转，同时又能让用户前进或者后退，这就是路由的本质需求。
一句话解释为：
无刷新的更改地址栏地址
React路由就是实现这个的，基本原理是H5History API
那么History的API是怎么一回事情呢？
原理：
浏览器的历史记录，以栈的形式存储，后进先出，按照栈的规律，必须有的方法：进栈（pushstate）、出栈（popstate）、替换当前的（replacestate）
API使用：
pushstate/repalcestate

var state = {
    id: 2,
    name: "profile"
};
接收三个参数：{一个对象或者一个参数，描述记录的一些特性；一个字符串代表页面的标题；一个字符串代表页面的相对地址}
window.history.pushState(state, "My Profile", "/profile/");

popstate：当用户前进或者后退的时候，就会触发，可以设置监听函数

window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...});

应用场景：
导航栏链接，页面无刷新替换内容：阻止默认的链接，，抓取连接的地址，ajax获得对应地址的内容，替换当前内容，同时地址栏变换，页面无刷新。