admin管理员组文章数量:1633739
React路由
一 对SPA应用的理解
需要理解的概念有:
- 什么是SPA
- SPA和MPA的区别
- 实现一个SPA
- 如何给SPA做SEO
- SPA与MPA网站演示
1.什么是SPA
- 单页web应用(single-page application),翻译过来就是单页应用。
2) 整个应用只有一个完整的页面
3)点击页面中的链接不会刷新页面,只会做页面的局部更新
4)数据都需要通过Ajax请求获取,并在前端异步展现
2.SPA和MPA的区别
上面大家已经对单页面有所了解了,下面来讲讲多页应用。
MPA(MultiPage-page application),翻译过来就是多页应用。
在MPA中,每个页面都是一个主页面,都是独立的。
当我们在访问另一个页面的时候,都需要重新加载html、css、js文件,公共文件则根据需求按需加载。
如下图
单页应用与多页应用的区别
单页面应用(SPA) | 多页面应用(MPA) | |
---|---|---|
组成 | 一个主页面和多个页面片段 | 多个主页面 |
刷新方式 | 局部刷新 | 整页刷新 |
url模式 | 哈希模式 | 历史模式 |
SEO搜索引擎优化 | 难实现,可使用SSR方式改善 | 容易实现 |
数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
页面切换 | 速度快,用户体验良好 | 切换加载资源,速度慢,用户体验差 |
维护成本 | 相对容易 | 相对复杂 |
单页应用优势与不足
优点:
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快,内容的改变不需要重新加载整个页面
- 良好的前后端分离,分工更明确
不足:
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
3.实现一个SPA
原理
- 监听地址栏中
hash
变化驱动界面变化 - 用
pushsate
记录浏览器的历史,驱动界面发送变化
实现
hash
模式
核心通过监听url
中的hash
来进行路由跳转
// 定义 Router
class Router {
constructor () {
this.routes = {
}; // 存放路由path及callback
this.currentUrl = '';
// 监听路由change调用相对应的路由回调
window.addEventListener('load', this.refresh, false);
window.addEventListener('hashchange', this.refresh, false);
}
route(path, callback){
this.routes[path] = callback;
}
push(path) {
this.routes[path] && this.routes[path]()
}
}
// 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))
miniRouter.push('/') // page1
history
模式
history 模式核心借用 HTML5 history api,api 提供了丰富的 router 相关属性
先了解一个几个相关的api history.pushState 浏览器历史纪录添加记录
history.replaceState修改浏览器历史纪录中当前纪录
history.popState 当 history 发生变化时触发
// 定义 Router
class Router {
constructor () {
this.routes = {
};
this.listerPopState()
}
init(path) {
history.replaceState({
path: path}, null, path);
this.routes[path] && this.routes[path]();
}
route(path, callback){
this.routes[path] = callback;
}
push(path) {
history.pushState({
path: path}, null, path);
this.routes[path] && this.routes[path]();
}
listerPopState () {
window.addEventListener('popstate' , e => {
const path = e.state && e.state.path;
this.routers[path] && this.routers[path]()
})
}
}
// 使用 Router
window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))
// 跳转
miniRouter.push('/page2')
4.如何给SPA做SEO
面给出基于Vue的SPA如何实现SEO的三种方式:
- SSR服务端渲染
将组件或页面通过服务器生成html,再返回给浏览器,如nuxt.js
- 静态化
目前主流的静态化主要有两种:
(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中
(2)另外一种是通过WEB服务器的 URL Rewrite的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
- 使用Phantomjs针对爬虫处理
原理是通过Nginx配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。
5.SPA与MPA网站演示
SPA:www.qiniu、阿里云平台、腾讯云平台等
MPA:www.163
二 对路由的理解
需要理解的概念有:
-
路由概念的核心词汇:静态路由表,分配地址,统一入口,寻址以及过滤
-
什么是路由:
1 一个路由就是一个映射关系(key.value)
2 key为路径,value可能是function或component
-
路由的分类
1 后端路由:
① 理解:value是function,用来处理客户端提交的请求
② 注册路由:router.get(path,function(req,res))
③ 工作过程:当node接受到一个请求时,根据请求路径找到匹配的路由,条用路由中的函数来处理请求,返回响应数据
2 前端路由:
① 浏览器路由:value是component,用于展示页面内容
② 注册路由:
③ 工作过程:当浏览器的path变成/test时,当前路由组件就会变成Test组件
对于路由的功能实现原理现在可以大致做个剖析,它其实是提供了一种方式给各个场景之间进行切换操作并且管理其导航历史,每个场景都像一图层,可以推送至其它场景的最后面,当然,如果你将它删除就无法实现该操作了。我们尝试以一种更容易理解的方式进行解释,就是将路由理解成翻书操作,所有的页面就是我们配置的路由模块,可以将书本翻至某一页,也就是其中某一模块,也可以翻到另一页,另一个模块内容,当然,如果需要,还是可以翻回到刚才的那一页的,前提是你不能把那页纸给撕了。
三 前端路由原理
需要理解的概念有:
- HTML+CSS能否实现SPA项目
- 前端路由实现原理的核心模块是什么
- 前端路由的跳转模式主要有哪些
- 锚点与历史跳转的差异
利用HTML+CSS实现的SPA:http://qn.chinavanes/anchor-router.zip
前端路由实现原理的核心模块:https://github/ReactTraining/history
- history库
- 管理浏览器会话历史(history)的工具库
- 包装的是原生BOM中window.history和window.location.hash
- history API
- History.createBrowserHistory(): 得到封装window.history的管理对象
- History.createHashHistory(): 得到封装window.location.hash的管理对象
- history.push(): 添加一个新的历史记录
- history.replace(): 用一个新的历史记录替换当前的记录
- history.goBack(): 回退到上一个历史记录
- history.goForword(): 前进到下一个历史记录
- history.listen(function(location){}): 监视历史记录的变化
前端路由实现原理核心模块的应用:http://qn.chinavanes/history-router.zip
四 路由的基本使用
需要理解的概念有:
- react-router各个模块包的功能与差异
- React-router的核心API有哪些
1.react-router各个模块包的功能与差异
react-router的github地址:https://github/ReactTraining/react-router
react-router的官网项目地址:https://reactrouter/
react-router的理解:
- react的一个插件库
- 专门用来实现一个SPA应用
- 基于react的项目基本都会用到此库
1、React-router与React-router-dom的功能对比
React-router:实现了路由的核心功能
React-router-dom:基于React-router,加入了一些在浏览器运行下的一些功能,
例如:Link组件会渲染一个a标签
BrowserRouter使用 HTML5 提供的 history API可以保证你的 UI 界面和 URL 保持同步
HashRouter使用 URL 的 hash 部分保证你的 UI 界面和 URL 保持同步
2、React-router与React-router-dom的API对比
React-router:提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的API
React-router-dom:提供了BrowserRouter、Route、Link等API,可以通过dom操作触发事件控制路由
2.React-router的核心API有哪些
BrowserRouter | 浏览器模式路由,PC端 |
---|---|
HashRouter | Hash值模式路由,PC端 |
Link | 普通链接 |
NavLink | 导航链接 |
Prompt | 提示 |
MemoryRouter | 内存模式路由,ReactNative移动端 |
Redirect | 重定向 |
Route | 单个路由对象 |
Router | 整体路由对象 |
StaticRouter | 静态路由,SSR服务器端渲染使用 |
Switch | 选择路由 |
generatePath | 生成路由地址 |
history | 历史 |
location | 地址 |
match | 匹配 |
matchPath | 匹配路径 |
withRouter | 接收路由的HOC组件 |
3.创建基本路由切换
src/components/Home/index.js
import React, { Component } from 'react';
export default class Home extends Component {
render() {
return <div>我是Home组件</div>;
}
}
src/components/About/index.js
import React, { Component } from 'react';
export default class About extends Component {
render() {
return <div>我是About组件</div>;
}
}
3.1注册路由,设置静态路由表,并且分配地址
src/App.js 安装react-router-dom
目前报错:Error: Invariant failed: You should not use <Link>
outside a <Router>
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
class App extends Component {
render() {
return (
<div>
<div className='row'>
<div className='col-xs-offset-2 col-xs-8'>
<div className='page-header'>
<h2>React Router Demo</h2>
</div>
</div>
</div>
<div className='row'>
<div className='col-xs-2 col-xs-offset-2'>
<div className='list-group'>
<a className='list-group-item' href='./about.html'>
About
</a>
<a className='list-group-item active' href='./home.html'>
Home
</a>
</div>
</div>
<div className='col-xs-6'>
<div className='panel'>
<div className='panel-body'>
{/* 注册路由:设置静态路由表,并且分配路由地址 */}
<Route path='/about' component={About} />
<Route path='/home' component={Home} />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
3.2利用BrowserRoute进行静态路由表的包含
Route是什么?Route是路由
BrowserRouter与Route的关系是什么?
Router代表的是一整个路由对象,它是数组
Route是整个路由对象中的其中一个而已,是单一的路由模块对象
import React, { Component } from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
版权声明:本文标题:React路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729175012a1188602.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论