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 ...
随机推荐
- @ResponseBody注解和@RequestBody注解
@ResponseBody:表示该方法的返回结果直接写入HTTP response body中一般在异步获取数据时使用, 在使用@RequestMapping后,返回值通常解析为跳转路径,加上@Res ...
- 【Teradata】tdlocaledef修改默认日期配置
如下所有操作需要使用root登录到TD数据库节点操作 1.获取数据库当前默认配置 //使用root登录TD数据库节点 cd /opt/teradata/tdat/tdbms/xx.xx.xx.xx/b ...
- 【Linux基础】awk命令
1.awk命令说明 (1)awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 (2)awk处理过程: 依次对每一行进行处理,然后输出 ...
- (转)Spring Boot(九):定时任务
http://www.ityouknow.com/springboot/2016/12/02/spring-boot-scheduler.html 在我们开发项目过程中,经常需要定时任务来帮助我们来做 ...
- MySQL高级知识(十四)——行锁
前言:前面学习了表锁的相关知识,本篇主要介绍行锁的相关知识.行锁偏向InnoDB存储引擎,开销大,加锁慢,会出现死锁,锁定粒度小,发生锁冲突的概率低,但并发度高. 0.准备 #1.创建相关测试表tb_ ...
- 利用os.system 截取终端日志输出 存为txt
# -*- coding: utf- -*- import os os.system(r"python %s/add_test.py > terminal_record.txt&quo ...
- P1433 吃奶酪(搜索DFS+记忆化)
emmmmm,我还是看了题解的....尴尬,其实不用记忆化搜索也是可以的.因为我不用也是最后一个点超时.但是我是用的贪心+DFS...超时的原因是贪心....mmp,本来加贪心就是为了不超时.... ...
- 002_cookie的session_id解释
HTTP协议(http://www.w3.org/Protocols/)是“一次性单向”协议. 服务端不能主动连接客户端,只能被动等待并答复客户端请求.客户端连接服务端,发出一个HTTP Reques ...
- CentOS 软件安装(yum 和 rpm)
CentOS 软件安装方法 常用的分为两种, - yum install 安装包名 : 类似于 Debian 的 “ apt-get install 安装包名 “ - rpm -i rmp文件名 :类 ...
- 简单使用普通用户启动tomcat
新建用户tomcat,该用户不能登录 useradd tomcat -s '/sbin/nologin' 将/usr/local/tomcat/bin/startup.sh更名 mv /usr/loc ...