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 ...
随机推荐
- K-means算法的matlab程序(初步)
K-means算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648369.html 文章中已经介绍了K-means算法,现在用matlab程序实现 ...
- 《生命》第三集:Mammals (哺乳动物)
南极零下四十度的情况下,威德尔海豹能深潜到冰下捕食,并且教自己的小宝宝如何下水,看了这个才知道,海豹居然是哺乳动物,小海豹看着挺萌的. 长鼻鼩是一种很活跃的生物,而且会自己设计路线,建立迷宫,帮助自己 ...
- ES5-ES6-ES7_数组的扩展
Array.prototype.indexOf(value) 得到值在数组中的第一个下标,如果元素不存在返回-1,可以用来判断是否包含指定的元素 var arr = [6,5,4,3,1,7,6]; ...
- C#进阶のMEF注入
1.什么是MEF 先来看msdn上面的解释:MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库发现并使用扩展, ...
- Linux平台上轻松安装与配置Domino
Linux平台上轻松安装与配置Domino Domino Server的编译安装过程中需要用到libstdc++-2.9和glibc-2.1.1(或者其更高的版本)两个编译模块,它们是Linux开发编 ...
- Leetcode:003 无重复字符串
Leetcode:003 无重复字符串 关键点:给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度.示例 1:输入: "abcabcbb"输出: 3 解释: 因为无重复 ...
- range()函数
range()函数 函数说明: range(start, stop[, step]) -> range object,根据start与stop指定的范围以及step设定的步长,生成一个序列.参数 ...
- Memcache分布式锁 转发 https://www.cnblogs.com/li150dan/p/9529090.html
在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...
- 【转】配置不当引起高危漏洞?看加密货币交易所如何正确用Spring Boot Actuaotr框架
https://xz.aliyun.com/t/2233 SpringBoot应用监控Actuator使用的安全隐患 概述 微服务作为一项在云中部署应用和服务的新技术是当下比较热门话题,而微服务的特点 ...
- 获得数值型数组的所有元素之和(分别使用增强for循环和普通for循环)
package com.Summer_0419.cn; /** * @author Summer * 获得数值型数组的所有元素之和 */public class Test_Method13 { pub ...