react 路由4 学习
表单控件 受控表单组件
非受控的表单组件 demo:收集表单提交的数据 路由(V4) 特点:一切皆是组件
官网:https://reacttraining.com/react-router/
npm i react-router-dom hash(HashRouter) history(BrowserRouter) 1)Router把根组件包裹起来
2)Route 对象就是路由对象就可以切组件
<Route path="路径" component={组件名字} />
3)设置路由的链接NavLink(选中的时候有样式) 或 Link 最重要的属性是to Switch作用是匹配的元素只显示第一个 exact精确匹配路由 Redirect 强制跳转 from 指定来自那个路由
to 跳转到那个路由 <Route path="/" exact component={One} />
可以跳转 ,但是NavLink不会加样式 <Redirect from ="/" to ="/one" exact />
404页面的匹配要放在最后面
<Route component={组件的名字} /> 子路由 设置方法同父级相同 可以用this.props.match.url添加匹配的路径 componentWillReceiveProps(nextProps)
动态的拿路由的参数
react 路由4 学习的更多相关文章
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 详细解析学习笔记
React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化 开发模式 React通过对DOM的模拟 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 我的一个React路由嵌套(多级路由),路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...
随机推荐
- Kafka 0.11新功能介绍:空消费组延迟rebalance
Kafka 0.11新功能介绍:空消费组延迟rebalance 在0.11之前的版本中,多个consumer实例加入到一个空消费组将导致多次的rebalance,这是由于每个consumer inst ...
- ES5-ES6-ES7_Promise对象详解
Promise对象概述(什么是Promise) Promise 是异步编程的一种解决方案,比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise,简单说就是一个容器,里面保存着某 ...
- 【CQOI2006】凸多边形
1713 -- [CQOI2006]凸多边形 Description 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. Input ...
- nginx学习笔记(二)
tail -f /var/log/nginx/access.log 查看nginx访问日志 安装ab压测工具 连接限制只有公有云才能测出,虚拟机只能测请求限制 添加用户 覆盖用户 新增用户 文件是配置 ...
- Netty中ByteBuf 的零拷贝
转载:https://www.jianshu.com/p/1d1fa2fe1ed9 此文章已同步发布在我的 segmentfault 专栏. 根据 Wiki 对 Zero-copy 的定义: &quo ...
- 转://Oracle 数据备份与恢复微实践
1.模拟控制文件丢失后的数据库恢复(完全恢复) 今天的主题是备份与恢复,目的就是保护数据的安全性,众所周知Oracle之所以在市场上占据了50%的份额,与它提供了强大的数据保护措施是分不开的,下面我们 ...
- day26 Python 改变对象的字符串显示
__str__,__repr__,__format__ format_dict={ 'nat':'{obj.name}-{obj.addr}-{obj.type}',#学校名-学校地址-学校类型 't ...
- Ubuntu16.04安装和使用ElasticSearch
1.下载es wget https://download.elastic.co/elasticsearch/release/org/elasticsearch/distribution/tar/ela ...
- JSONPath介绍
1. JSONPath介绍 官网地址: https://github.com/alibaba/fastjson/wiki/JSONPath fastjson 1.2.0之后的版本支持JSONPath. ...
- windows系统VS2017编译boost
1. 下载boost, 解压,进入boost源目录 2. 打开vs2017 x86 CMD工具,输入bootstrap.bat,等待初始化完毕 x86编译 bjam stage --toolset=m ...