react第十五单元(react路由的封装,以及路由数据的提取)
第十五单元(react路由的封装,以及路由数据的提取)
#课程目标
- 熟悉react路由组件及路由传参,封装路由组件能够处理路由表
- 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参
- 对复杂的react应用,能够提取路由表并使用路由组件简化路由配置
- 在路由组件中实现路由拦截功能
#知识点
- 封装路由组件
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>
}
- 路由表的配置
// 一级路由
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
}]
}
- 根路由的渲染
// 封装的类似与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'));
- 包含子路由的路由渲染
<RouterView routes={this.props.routes}></RouterView>
#授课思路
#案例和作业
使用封装路由实现抖音主页面的配置及路由传参
使用封装路由实现抖音顶部推荐和当前城市的切换
react第十五单元(react路由的封装,以及路由数据的提取)的更多相关文章
- react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...
- react第十四单元(react路由-react路由的跳转以及路由信息)
第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
- vue第十五单元(熟练使用vue-router插件)
第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...
- react第十六单元(redux的认识,redux相关api的掌握)
第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...
- react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)
第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...
- 十五、React:简单点餐实例:知识点,html解析写法
一.功能 从首页列表点进去,转到详情页 列表.详情从Api获取 Api列表:http://a.itying.com/api/productlist 详情:http://a.itying.com/api ...
- React Native(十五)——RN中的分享功能
终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...
- linux基础-第十五单元 软件包的管理
使用RPM安装及移除软件 什么是RPM rpm的文件名 rpm软件安装与移除工作中经常使用的选项 查看RPM软件包中的信息 查询已安装的软件包信息 RPM包的属性依赖性问题 什么是RPM包的属性依赖性 ...
随机推荐
- 阿里面试官:小伙子,给我说一下Spring 和 Spring Boot 的区别吧
前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...
- 怎么在苹果笔记本上用Folx重新下载已完成的任务
大家在完成了任务下载后,有时会将下载的文件移动到其他文件夹中,或者是,当下载的文件已经使用完毕时,有些用户会将文件删除.以上的两种情况,都会导致Folx所属任务查看功能失效,也就是说,无法找到任务对应 ...
- guitar pro系列教程(二十三):如何使用Guitar Pro制作扫弦
前面的章节小编和大家讲解了很多关于Guitar Pro的使用功能,本章节我们将还是采用图文结合的方式和大家讲解如何使用Guitar Pro 制作扫弦,感兴趣的朋友可以进来看看哦. 扫弦的概念 对于很多 ...
- 下载器Folx的创建种子功能怎么使用
当我们想要分享一些自己制作的资源时,可以使用Folx的创建种子功能,在网络上分享种子,供他人下载,这个过程也被称为做种.作为种子创建者,需要在一定时间内保持做种进程,以便维持种子的生命期限,方便他人下 ...
- 安装git和lsof
yum install git yum install lsof 查看80端口 lsof -i:80
- yii2.0 中数据查询中 or、in、between 及session的使用
1 HTML: 2 3 <div> 4 <form class="form-inline " method="get" action=&quo ...
- 『CDN』让你的网站访问起来更加柔顺丝滑
我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...
- 第8.2节 Python类的__init__方法深入剖析:构造方法案例详解
前面一节介绍了构造方法定义的语法,并进行了语法解释说明,本节将通过案例来说明构造方法参数传递及返回值的情况. 一. 案例说明 本节定义一个汽车类,它有四个实例变量:wheelcount, pow ...
- Python函数中的位置参数
函数的参数在调用时传递数据时,默认是按参数的位置顺序传值,即形参的顺序与实参的顺序逐一对应,这种参数的使用模式称为位置参数.位置参数是最常用的一种参数使用形式. 使用位置参数传递实参的情况下,要求有缺 ...
- 第11.6节 Python正则表达式的字符串开头匹配模式及元字符“^”(插入符、脱字符)功能介绍
符号"^"为插入符,也称为脱字符,在Python中脱字符表示匹配字符串的开头,即字符串的开头满足匹配模式的要求.这个功能有点类似搜索函数match,只是这是通过搜索模式来指定,而m ...