第十四单元(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多线程和并发面试题，我拿到了字节和美团的offer！

    最近好多粉丝私信我说在最近的面试中老是被问到多线程和高并发的问题,又对这一块不是很了解,很简单就被面试官给问倒了,被问倒的后果当然就是被刷下去了,因为粉丝要求,我最近也是花了两天时间 给大家整理了这一 ...

  2. 如何用MathType 7输入x的一阶导数

    物理学.几何学.经济学等学科中的一些重要概念都可以用导数来表示.如,导数可以表示运动物体的瞬时速度和加速度.可以表示曲线在一点的斜率.还可以表示经济学中的边际和弹性.那么作为专业的公式编辑器,如何输入 ...

  3. 和功能相近的虚拟机软件相比，CrossOver的产品优势有哪些？

    很多用户其实并不喜欢虚拟机软件,他们只是想用回熟悉的Windows应用程序,因为苹果系统与许多软件并不兼容.无奈之下,他们只能安装虚拟机软件.可是虚拟机软件大多比较笨重并且也相对复杂一些,在后期维护上 ...

  4. centos 7 安装zabbix-4.0

    第一步:安装nginx ############安装Nginx###########yum localinstall http://nginx.org/packages/centos/7/noarch ...

  5. 【Luogu U41492】树上数颜色——树上启发式合并（dsu on tree）

    (这题在洛谷主站居然搜不到--还是在百度上偶然看到的) 题目描述 给一棵根为1的树,每次询问子树颜色种类数 输入输出格式 输入格式: 第一行一个整数n,表示树的结点数 接下来n-1行,每行一条边 接下 ...

  6. 【python】Matplotlib作图中有多个Y轴

    在作图过程中,需要绘制多个变量,但是每个变量的数量级不同,在一个坐标轴下作图导致曲线变化很难观察,这时就用到多个坐标轴.本文除了涉及多个坐标轴还包括Axisartist相关作图指令.做图中label为 ...

  7. zk可用性测试

    1.首先起3个zk: 2.观察主从情况: 3.连接集群观察心跳: 4.kill掉master: 可以看到客户端在重试几次后链接到了新的master,且seesionid没有改变. 5.观察现在的主从: ...

  8. 我与oracle的爱恨情仇（第一章）

    关于配置 问题一 可能是虚拟机桥接问题 问题解决的链接:[如何更改虚拟机桥接](https://jingyan.baidu.com/article/9113f81b7cfbd22b3214c790.h ...

  9. Django 2版本

    django2.0里面的path第一个参数不支持正则,你写什么就匹配,100%精准匹配 django2.0里面的re_path对应着django1.0里面的url 虽然django2.0里面的path ...

  10. Cassandra与职业发展 | 阿里云栾小凡 × 蔚来汽车张旭东 × 网龙阙乃祯

    # 活动精彩实录 | Cassandra与职业发展 点击此处观看完整活动录像​ 大家好,我叫邓为,我目前在DataStax担任领航架构师.我在DataStax工作了7年多的时间,也有7年多的Cassa ...