react-router的使用(一)——URL的hash、HTML5的history、Router的基本使用
一、阶段一:后端路由阶段
早期的网站开发整个HTML页面是由服务器来渲染的.
服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站, 这么多页面服务器如何处理呢?
- 一个页面有自己对应的网址, 也就是URL.
- URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
- Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
- 这就完成了一个IO操作.
上面的这种操作, 就是后端路由.
- 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿.
- 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
后端路由的缺点:
- 一种情况是整个页面的模块由后端人员来编写和维护的.
- 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
- 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情
二、阶段二:前后端分离阶段
前端渲染的理解:
- 每次请求涉及到的静态资源都会从静态资源服务器获取;
- 这些资源包括HTML+CSS+JS,然后在前端对这些请求回来的资源进行渲染;
- 需要注意的是,客户端的每一次请求,都会从静态资源服务器请求文件;
- 同时可以看到,和之前的后断路由不同,这时后端只是负责提供API了;
前后端分离阶段:
- 随着Ajax的出现, 有了前后端分离的开发模式;
- 后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中;
- 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上;
- 并且当移动端(iOS/Android)出现后,后端不需要进行任何处理,依然使用之前的一套API即可;
- 目前很多的网站依然采用这种模式开发(jQuery开发模式);
三、阶段三:单页面富应用(SPA)
单页面富应用的理解:
- 单页面富应用的英文是single-page application,简称SPA;
- 整个Web应用只有实际上只有一个页面,当URL发生改变时,并不会从服务器请求新的静态资源;
- 而是通过JavaScript监听URL的改变,并且根据URL的不同去渲染新的页面;
如何可以应用URL和渲染的页面呢?前端路由
- 前端路由维护着URL和渲染页面的映射关系;
- 路由可以根据不同的URL,最终让我们的框架(比如Vue、React、Angular)去渲染不同的组件;
- 最终我们在页面上看到的实际就是渲染的一个个组件页面;
四、前端路由的原理
前端路由是如何做到URL和内容进行映射呢?监听URL的改变。
URL发生变化,同时不引起页面的刷新有两个办法:
- 通过URL的hash改变URL;
- 通过HTML5中的history模式修改URL;
当监听到URL发生变化时,我们可以通过自己判断当前的URL,决定到底渲染什么样的内容。
五、URL的hash
URL的hash
- URL的hash也就是锚点(#), 本质上是改变window.location的href属性;
- 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新;
注意:
Ø hash的优势就是兼容性更好,在老版 IE中都可以运行;
Ø 但是缺陷是有一个#,显得不像一个真实的路径;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><a href="#/home">首页</a><a href="#/about">关于</a><div class="router-view"></div></div><script>// 获取router-view的DOMconst routerViewEl = document.getElementsByClassName("router-view")[0];// 监听URL的改变window.addEventListener("hashchange", () => {switch (location.hash) {case "#/home":routerViewEl.innerHTML = "首页";break;case "#/about":routerViewEl.innerHTML = "关于";break;default:routerViewEl.innerHTML = "";}})</script>
</body>
</html>
六、HTML5的history
history接口是HTML5新增的, 它有六种模式改变URL而不刷新页面:
- replaceState:替换原来的路径;
- pushState:使用新的路径;
- popState:路径的回退;
- go:向前或向后改变路径;
- forward:向前改变路径;
- back:向后改变路径;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><a href="/home">首页</a><a href="/about">关于</a><div class="router-view"></div></div><script>// 1.获取router-view的DOMconst routerViewEl = document.getElementsByClassName("router-view")[0];// 获取所有的a元素, 自己来监听a元素的改变const aEls = document.getElementsByTagName("a");for (let el of aEls) {el.addEventListener("click", e => {e.preventDefault();const href = el.getAttribute("href");history.pushState({}, "", href);urlChange();})}// 执行返回操作时, 依然来到urlChangewindow.addEventListener('popstate',urlChange);// 监听URL的改变function urlChange() {switch (location.pathname) {case "/home":routerViewEl.innerHTML = "首页";break;case "/about":routerViewEl.innerHTML = "关于";break;default:routerViewEl.innerHTML = "";}}</script></body>
</html>
七、react-router
目前前端流行的三大框架, 都有自己的路由实现:
- Angular的ngRouter
- React的react-router
- Vue的vue-router
React Router的版本4开始,路由不再集中在一个包中进行管理了:
- react-router是router的核心部分代码;
- react-router-dom是用于浏览器的;
- react-router-native是用于原生应用的;
目前我们使用最新的React Router版本是v5的版本:
- 实际上v4的版本和v5的版本差异并不大;
安装react-router:
- 安装react-router-dom会自动帮助我们安装react-router的依赖;
yarn add react-router-dom
八、Router的基本使用
react-router最主要的API是给我们提供的一些组件:
BrowserRouter或HashRouter
- Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件;
- BrowserRouter使用history模式;
- HashRouter使用hash模式;
Link和NavLink:
- 通常路径的跳转是使用Link组件,最终会被渲染成a元素;
- NavLink是在Link基础之上增加了一些样式属性(后续学习);
- to属性:Link中最重要的属性,用于设置跳转到的路径;
Route:
- Route用于路径的匹配;
- path属性:用于设置匹配到的路径;
- component(v5)/ element(v6)属性:设置匹配到路径后,渲染的组件;
- exact:精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件;
import React, {PureComponent} from 'react';
import {BrowserRouter, Link, Route, Routes} from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
import Profile from "./pages/profile";class App extends PureComponent {render() {return (<div><BrowserRouter><Link to='/'>首页</Link><Link to='/about'>关于</Link><Link to='/profile'>我的</Link><Routes><Route exact path='/' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/></Routes></BrowserRouter></div>);}
}export default App;
react-router的使用(一)——URL的hash、HTML5的history、Router的基本使用相关推荐
- Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...
- Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同 最直观 ...
- vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别 咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- Vue 的路由实现 Hash模式 和 History模式
Hash 模式: Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件... 可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存 ...
- vue-router区分hash模式和history模式
总结: hash模式是我们在url后面添加一个#xx触发事件.尽管浏览器没有请求服务器,但是页面状态和url已经关联起来了,这就是所谓的前端路由,单页应用的标配. history模式下浏览器地址不规整 ...
- hash值和history值详解区别
赠人玫瑰 Vue作为前端主流的渐进式开发框架被大量程序员熟知应用,Vue中为了构建SPA(single page web application,单页Web应用),需要引入前端路由系统,这也就是 V ...
- 前端路由之hash路由与history路由 Orz
什么是路由 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://hometown.xxx.edu.cn/bbs/forum.php 有时还会有带.asp或.html ...
最新文章
- 命令行修改weblogic用户名和密码
- 独家解密:阿里是如何应对超大规模集群资源管理挑战的?
- 微头条败走,多闪殿后,字节跳动的社交梦依旧难圆
- 目录同步 linux,Linux系统目录实时同步
- oracle 附加日志 挂起,Oracle 附加日志(supplemental log)
- yii mysql 主从_mysql主从同步实践 YII
- java判断优先级代码_java运算符的优先级
- 正反对角线java表示_连接4对角线Win Check
- 华为OceanStor Pacific斩获IO500榜单第二,数据存储的时与势
- 龙珠直播php,斗鱼、全民TV、龙珠等直播平台排行榜 看视频直播发展趋势
- elementui 描述列表Descriptions组件宽度修改
- android usb 读写权限,Android默认给予USB读写权限,去掉受权对话框
- OSChina 周四乱弹 ——来我数数,你们中间有几只毛毛虫
- 直达号PK公众号的背后还有哪些市场空间?
- 有关“SRS Audio Sandbox”的一些问题?
- 服务器主机型号,服务器的主机型号
- 《软件研发效能度量规范》的解读与实践(文末附有下载)
- mac虚拟机桌面图标隐藏_「MAC软件推荐」MAC实用软件
- 通过三点坐标求三角形面积
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍