第十四单元(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. 深度分析：java设计模式中的原型模式，看完就没有说不懂的

    前言 原型模式(Prototype模式)是指:用原型实例指定创建对象的种类,并且通过拷贝这些原型,创建新的对象 原型模式是一种创建型设计模式,允许一个对象再创建另外一个可定制的对象,无需知道如何创建的 ...

  2. 如何使用ABBYY FineReader处理文档图像的缺陷？

    通过扫描仪或者数码相机获取的图像文件,容易出现文本扭曲.页面歪斜等缺陷,会影响到OCR的识别质量.此时,用户可使用ABBYY FineReader 15(Windows系统)OCR文字识别软件的自动和 ...

  3. yii\web\Request::cookieValidationKey must be configured with a secret key.

    yii\web\Request::cookieValidationKey must be configured with a secret key. 出现的错误表示没有设置  cookieValida ...

  4. 聊聊kafka-client的源码

    一,感想 kafka 客户端代码很早以前 我就想研究借鉴一下,我前前后后至少阅读过三遍源码,我发现我看不下去,不知道为啥这么写,在次期间,我也参考了很多的网上的源码分析,我发现自己依然一知半解的, 慢 ...

  5. spring与分布式事务

    转载:https://www.cnblogs.com/qianjun2017/p/8349829.html 转载:https://blog.csdn.net/jaryle/article/detail ...

  6. zk下的kafka节点

    zk从某种程度上说是kafka的单点失效组件. /brokers:里面保存了Kafk集群的所有信息,包括每台broker的注册信息,集群上所有topic的信息等. /controller:保存了Kaf ...

  7. [BUGCASE]FixedDataTable表格数据渲染错误

    一.问题描述 广告配置中绑定第三方规格ID表格数据,有一部分展示错乱,具体如下: 表格组件使用 Facebook 的 (fixed-data-table) 组件 二.原因分析 1.检查props 先查 ...

  8. mfc c++优化

    1.不住求精度时,尽量使用单精度浮点型2.使用32位数据类型3.使用有符号和无符号整型: 前提:无需考虑正负时 double x; int i; x = i; 使用有符号:unsigned int i ...

  9. Dotnet Core下的Channel, 你用了吗？

    今天给大家分享一个微软官方的好东西:Channel.   前言 今天给大家分享一个微软官方的生产者/消费者方案的特性解决:Channel. Channel在System.Threading.Chann ...

  10. 17_Android网络通信

    1. Android异步任务处理 在程序开启后,就会有一个主线程,负责与用户交互.如果在主线程中执行了耗时操作,那么界面就会停止响应,所以要将耗时操作转移到别的线程中. AsyncTask的用法,包括 ...