第十四单元(react路由-react路由的跳转以及路由信息)

#课程目标

  1. 理解前端单页面应用与多页面应用的优缺点
  2. 理解react路由是前端单页面应用的核心
  3. 会使用react路由配置前端单页面应用框架及实现页面之间的跳转
  4. 认识react路由元信息，学会从react路由元信息中拿到所需要的路由信息
  5. 会使用react路由传参，及通过传参实现页面之间数据的传递

#知识点

  1. react路由库，react-dom(react-router-dom+react-router-native)或者react-router-dom的安装
  2. 了解路由模式：history(BrowserRouter组件) & hash(HashRouter组件)
  3. 路由跳转组件：Link, NavLink和Redirect
  4. 添加路由记录：Switch和Route
  5. 路由元信息：history, location和match
  6. 路由高阶组件：withRouter

#授课思路

#案例和作业

  1. 使用路由实现猫眼电影的页面架构

  2. 使用路由传参实现猫眼电影列表页跳详情

react第十四单元(react路由-react路由的跳转以及路由信息)的更多相关文章

  1. vue第十四单元(认识单页面应用，理解vue-router的基本用法)

    第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...

  2. linux基础-第十四单元 Linux网络原理及基础设置

    第十四单元 Linux网络原理及基础设置 三种网卡模式图 使用ifconfig命令来维护网络 ifconfig命令的功能 ifconfig命令的用法举例 使用ifup和ifdown命令启动和停止网卡 ...

  3. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

  4. react第十五单元(react路由的封装，以及路由数据的提取)

    第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...

  5. react第十九单元(react+react-router-dom+redux综合案例1)

    第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...

  6. react第十六单元(redux的认识，redux相关api的掌握)

    第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...

  7. react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码，规范目录结构)

    第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...

  8. React Native(十四)——Slider

    最近我们rn版的App快要内测了,小伙伴们都在积极的改bug,于是在其中就遇到了关于Slider的部分小知识,特地记录自己用到的部分属性,也许恰好会帮助到用到该组件的你: 属性罗列(https://r ...

  9. 第十四单元 Linux网络原理及基础设置

    ·ifconfig命令来维护网络(详见linux系统管理P422) 1) 掌握ifconfig命令的功能:显示所有正在启动的网卡的详细信息或设定系统中网卡的IP地址.2) 灵活应用ifconfig命令 ...

随机推荐

  1. 正则表达式——maltrail工程项目中使用

    1. 正则表达所需语法 \ 正则表达式使用反斜杠字符 ('') 来表示特殊形式或是允许在使用特殊字符时不引发它们的特殊含义. 转义特殊字符(允许你匹配 '*', '?', 或者此类其他) \A 只匹配 ...

  2. php filesize不能统计临时文件

    文件上传时要统计上传的文件的大小,使用filesize('文件名')的时候,其中 的文件名就得是文件在本地的临时文件但是会出现一个错误显示成 filesize(): stat failed for D ...

  3. 与运算（&）、或运算（|）、异或运算（^）、右移运算符（>>>）本质介绍

    按位与运算符(&) 参加运算的两个数据,按二进制位进行"与"运算. 运算规则:0&0=0;  0&1=0;   1&0=0;    1&1= ...

  4. P5665 划分

    Part 1 先来看一个错误的贪心做法:假设当前结尾的一段和为 \(a\),等待加入结尾的一段和为 \(b\),现在要处理新进来的数 \(c\). \(a\leq b\),将 \(a\) 算入答案,将 ...

  5. Java中的单例模式最全解析

    单例模式是 Java 中最简单的设计模式之一,它是指一个类在运行期间始终只有一个实例,我们就把它称之为单例模式.它不但被应用在实际的工作中,而且还是面试中最常考的题目之一.通过单例模式我们可以知道此人 ...

  6. IDEA集成Docker插件后出现日志乱码的解决办法

    修改IDEA的vmoptions文件 找到IDEA安装目录的bin目录,在idea.exe.vmoptions和idea64.exe.vmoptions文件中追加以下内容: -Dfile.encodi ...

  7. uniapp cli版本中如何引入scss？

    一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新建项目成功后,官方为我们准备了uni.scss文件,在这个里面写即可全局使用. ... 一. ...

  8. 区块链知识博文1： 共识算法之争（PBFT，Raft，PoW，PoS，DPoS，Ripple）

    注:这是本人读到的关于共识算法最全和最好的分享博文,系统的介绍了拜占庭容错技术以及共识算法的原理和常用共识算法,原文链接请见后. 目录 一.拜占庭容错技术(Byzantine Fault Tolera ...

  9. 老猿学5G：融合计费的Nchf和Nchf‘服务化接口消息Nchf_ConvergedCharging_Create、Update、Release和Notify

    ☞ ░ 老猿Python博文目录░ 一.引言 在<老猿学5G扫盲贴:中国移动的5G计费架构解读>介绍了5G融合计费的服务化接口包括: CHF提供给CTF使用的Nchf接口 OCF提供给CH ...

  10. 老猿学5G扫盲贴：N6接口用户平面协议栈对应的网络分层模型

    在网络通信模型中,都对应有分层的网络结构,如开放式系统互联(OSI)的七层模型(物理层.数据链路层.网络层.传输层.会话层.表示层和应用层)以及TCP/IP四层(网络接口层.网络层.传输层和应用层)模 ...