admin管理员组文章数量:1633937
后端路由 意味着 浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。
前端路由就不会有这样的问题了。随意控制,逻辑也可以都放在前端。前端慢慢复杂化,自己的路由这种东西是必不可少的啦。
从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升
前端路由的实现由两种方式:一是通过改变hash值,监听onhashchange事件,这种方式的优点是可以兼容低版本浏览器
二是通过historyAPI,监听popState事件,用pushState和replaceState来实现
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的。
React Router 并不是 Facebook 的 React 官方团队开发的,但是据说有官方人员参与开发。React Router 的设计思想来源于 Ember 的路由,如果原来有用过 Ember 的路由,那么应该对 React Router 不会陌生。
什么是路由?
对于没有开发过后端,也没有开发过 SPA 的前端来说,「路由」这个名词可能会让人比较困惑,这里的路由并不是指「硬件路由」,也不是网络七层协议中的「网络层路由」,但是其思想原理是一样的。我尽量简单通俗的介绍一下。
假如我们有一台提供 Web 服务的服务器的网络地址是:10.0.0.1
,而该 Web 服务又提供了三个可供用户访问的页面,其页面 URI 分别是:
1 2 3 | http : //10.0.0.1/ http : //10.0.0.1/about http : //10.0.0.1/concat |
那么其路径就分别是 /
,/about
,/concat
。
当用户使用 http://10.0.0.1/about
来访问该页面时,Web 服务会接收到这个请求,然后会解析 URI 中的路径 /about
,在 Web 服务的程序中,该路径对应着相应的处理逻辑,程序会把请求交给路径所对应的处理逻辑,这样就完成了一次「路由分发」,这个分发就是通过「路由」来完成的。
前端路由
前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history
API 出现之前,前端的路由都是通过 hash
来实现的,hash
能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用 hash
来实现的话,它的 URI 规则中需要带上 #
。
1 2 3 | http : //10.0.0.1/ http : //10.0.0.1/#/about http : //10.0.0.1/#/concat |
Web 服务并不会解析 hash
,也就是说 #
后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash
读取到的,读取到路径加以解析之后就可以响应不同路径的逻辑处理。
history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history (会话历史)。基于 history
来实现的路由可以和最初的例子中提到的路径规则一样。
1 2 3 | http : //10.0.0.1/ http : //10.0.0.1/about http : //10.0.0.1/concat |
用户可能都察觉不到该访问地址是 Web 服务实现的路由还是前端实现的路由。
说了这么多的「路由基础」,该回头来说说 React Router 了。
配置路由
使用 React Router 来配置上面例子中的三个页面,每个页面分别对应着一个 React Component。
/about
页面的入口文件 about.js
1 2 3 |
版权声明:本文标题:前端路由与后端路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729177263a1188875.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论