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

#课程目标

  1. 熟悉react路由组件及路由传参,封装路由组件能够处理路由表
  2. 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参
  3. 对复杂的react应用,能够提取路由表并使用路由组件简化路由配置
  4. 在路由组件中实现路由拦截功能

#知识点

  1. 封装路由组件
import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom'; export default (props)=>{
return <Switch>
{
props.routes.map((item, index)=>{
return <Route key={index} path={item.path} render={(props)=>{
if (item.children){
/** 渲染组件,类似于<Tab/>
* ...props 把路由信息展开传递下去
* item.children 把子路由配置传递下去
*/
return <item.component {...props} routes={item.children}/>
}else{
return <item.component {...props}/>
}
}}></Route>
})
}
<Redirect exact from="/" to="/list"></Redirect>
</Switch>
}
 
  1. 路由表的配置
// 一级路由
import List from '../components/List';
import Detail from '../components/Detail'; // 二级路由
import Content from '../components/Content'; export default {
routes: [{
path: '/list',
component: List,
children: [{
path: '/list/content',
component: Content
}]
},{
path: '/detail',
component: Detail
}]
}


  1. 根路由的渲染
// 封装的类似与router-view的组件
import RouterView from './router/RouterView';
// 路由配置
import config from './router/router.co nfig'; ReactDOM.render(<Router>
<RouterView routes={config.routes}></RouterView>
</Router>, document.getElementById('root'));
 
  1. 包含子路由的路由渲染
<RouterView routes={this.props.routes}></RouterView>
1

#授课思路

#案例和作业

    1. 使用封装路由实现抖音主页面的配置及路由传参

    2. 使用封装路由实现抖音顶部推荐和当前城市的切换

react第十五单元(react路由的封装,以及路由数据的提取)的更多相关文章

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

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

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

    第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...

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

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

  4. vue第十五单元(熟练使用vue-router插件)

    第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...

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

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

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

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

  7. 十五、React:简单点餐实例:知识点,html解析写法

    一.功能 从首页列表点进去,转到详情页 列表.详情从Api获取 Api列表:http://a.itying.com/api/productlist 详情:http://a.itying.com/api ...

  8. React Native(十五)——RN中的分享功能

    终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...

  9. linux基础-第十五单元 软件包的管理

    使用RPM安装及移除软件 什么是RPM rpm的文件名 rpm软件安装与移除工作中经常使用的选项 查看RPM软件包中的信息 查询已安装的软件包信息 RPM包的属性依赖性问题 什么是RPM包的属性依赖性 ...

随机推荐

  1. 阿里面试官:小伙子,给我说一下Spring 和 Spring Boot 的区别吧

    前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...

  2. 怎么在苹果笔记本上用Folx重新下载已完成的任务

    大家在完成了任务下载后,有时会将下载的文件移动到其他文件夹中,或者是,当下载的文件已经使用完毕时,有些用户会将文件删除.以上的两种情况,都会导致Folx所属任务查看功能失效,也就是说,无法找到任务对应 ...

  3. guitar pro系列教程(二十三):如何使用Guitar Pro制作扫弦

    前面的章节小编和大家讲解了很多关于Guitar Pro的使用功能,本章节我们将还是采用图文结合的方式和大家讲解如何使用Guitar Pro 制作扫弦,感兴趣的朋友可以进来看看哦. 扫弦的概念 对于很多 ...

  4. 下载器Folx的创建种子功能怎么使用

    当我们想要分享一些自己制作的资源时,可以使用Folx的创建种子功能,在网络上分享种子,供他人下载,这个过程也被称为做种.作为种子创建者,需要在一定时间内保持做种进程,以便维持种子的生命期限,方便他人下 ...

  5. 安装git和lsof

    yum install git yum install lsof 查看80端口 lsof -i:80

  6. yii2.0 中数据查询中 or、in、between 及session的使用

    1 HTML: 2 3 <div> 4 <form class="form-inline " method="get" action=&quo ...

  7. 『CDN』让你的网站访问起来更加柔顺丝滑

    我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...

  8. 第8.2节 Python类的__init__方法深入剖析:构造方法案例详解

    前面一节介绍了构造方法定义的语法,并进行了语法解释说明,本节将通过案例来说明构造方法参数传递及返回值的情况. 一.    案例说明 本节定义一个汽车类,它有四个实例变量:wheelcount, pow ...

  9. Python函数中的位置参数

    函数的参数在调用时传递数据时,默认是按参数的位置顺序传值,即形参的顺序与实参的顺序逐一对应,这种参数的使用模式称为位置参数.位置参数是最常用的一种参数使用形式. 使用位置参数传递实参的情况下,要求有缺 ...

  10. 第11.6节 Python正则表达式的字符串开头匹配模式及元字符“^”(插入符、脱字符)功能介绍

    符号"^"为插入符,也称为脱字符,在Python中脱字符表示匹配字符串的开头,即字符串的开头满足匹配模式的要求.这个功能有点类似搜索函数match,只是这是通过搜索模式来指定,而m ...