[React] 尚硅谷 -- 学习笔记(六)

第六章 react-router4

理解

react-router

react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库

SPA

单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击路由链接时, 只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现

路由

什么是路由

一个路由就是一个映射关系(key:value)
key为路由路径, value可能是function/component

路由分类

后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件

后台路由

注册路由: router.get(path, function(req, res))
当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由

注册路由: <Route path="/about" component={About}>
当浏览器的hash变为#about时, 当前路由组件就会变为About组件

前端路由实现

history库
- 网址: https://github.com/ReactTraining/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){}): 监视历史记录的变化

react-router相关API

组件

<BrowserRouter>

<HashRouter>

<Route>

<Redirect>

<Link>

<NavLink>

<Switch>

其他

history对象

match对象

withRouter函数

基本路由使用

下载react-router: npm install --save react-router@4
引入bootstrap.css: <link rel="stylesheet" href="/css/bootstrap.css">

[React] 尚硅谷 -- 学习笔记(六)相关推荐

[React] 尚硅谷 -- 学习笔记(七)
第七章 react-ui 最流行的开源React UI组件库 material-ui(国外) 官网 GitHub ant-design(国内蚂蚁金服) PC官网 GitHub 移动官网 GitHub ...
[React] 尚硅谷 -- 学习笔记(四)
第四章 react ajax 理解 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库( ...
[React] 尚硅谷 -- 学习笔记(三)
第三章 react应用(基于react脚手架) 使用create-react-app创建react应用 react脚手架 xxx 脚手架:用来帮助程序员快速创建一个基于 xxx 库的模板项目包含了所 ...
[React] 尚硅谷 -- 学习笔记(二)
第二章 React面向组件编程基本理解和使用自定义组件定义组件工厂函数组件(简单组件) function MyComponent () {return <h2>工厂函数组件(简单组 ...
[React] 尚硅谷 -- 学习笔记(一)
第一章 React入门 React基本认识用于构建用户界面的 JavaScript 库(View) 官网英文官网: https://reactjs.org/ 中文官网: https://doc.r ...
[React] 尚硅谷 -- 学习笔记(五)
第五章总结组件间通信通过props传递共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props可以传递一般数据和函数数据, 只能一层一层传递一般数据–>父组件 ...
B站MySQL(尚硅谷)学习笔记
B站MySQL基础(尚硅谷)学习笔记最近在学习数据库技术,并且把视频中的知识点进行了汇总,字数较多,仅供参考. 会持续更新欢迎读者提出问题与错误,一起交流~ 视频前几集所讲述的基本知识: DB:数 ...
Java 基础第3阶段：高级应用——尚硅谷学习笔记（含面试题） 2023年
Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年第 9 章异常处理 9.1 异 ...
JUC 2020 周阳尚硅谷学习笔记
这里写目录标题一 JUC 介绍 1 进程线程介绍介绍 2 并发并行的介绍 3 wait 和 sleep的区别 4 线程的状态二卖票算法的企业级模板实现企业级简单实现(synchronized) ...

[React] 尚硅谷 -- 学习笔记(六)

第六章 react-router4

理解

react-router

SPA

路由

前端路由实现

react-router相关API

组件

其他

基本路由使用

[React] 尚硅谷 -- 学习笔记(六)相关推荐

最新文章

热门文章