React基本原理——路由

来源:互联网 发布:网站推荐 无病毒 知乎 编辑:程序博客网 时间:2024/06/14 19:26

路由可以简单理解为导航链接。
那么为什么需要路由呢?
简单来说,在导航栏链接,不希望产生页面跳转,同时又能让用户前进或者后退,这就是路由的本质需求。
一句话解释为:
无刷新的更改地址栏地址
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获得对应地址的内容,替换当前内容,同时地址栏变换,页面无刷新。

原创粉丝点击