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 ...
随机推荐
- 028实现strStr()
#pragma once #include "000库函数.h" /*********************自解**************/ //使用算法中的find 12ms ...
- #004 C语言大作业学生管理系统试着做
链表不会用 文件不会使 在这种情况下就边写边做 希望这个月能做完这个作业 #include<stdio.h> #include<stdlib.h> #include<st ...
- 【Linux基础】history查看历史命令
1.history命令 “history”命令就是历史记录.它显示了在终端中所执行过的所有命令的历史. history //显示终端执行过的命令 history //显示最近10条终端执行过的命令 C ...
- C#事件の事件聚合器
事件聚合器用于集中管理事件的订阅(Subscribe)和处理(Handle),要使用事件聚合器,首先要理解:事件(event)本质上是一个类. 传统的+=和-=不足: 1.管理很麻烦:2.不方便扩展. ...
- Linux 与 Unix 到底有什么不同?区别在哪?
Linux 与 Unix 到底有什么不同?区别在哪? 如果你是一名20多岁或30多岁的软件开发人员,那么你已成长在一个由Linux主导的世界中.数十年来,它一直是数据中心的重要参与者,尽管很难找到明确 ...
- 写了12年JS也未必全了解的连续赋值运算
引子 var a = {n:1}; var b = a; // 持有a,以回查 a.x = a = {n:2}; alert(a.x);// --> undefined alert(b.x);/ ...
- numpy中矩阵乘法,星乘(*)和点乘(.dot)的区别
import numpy a = numpy.array([[,], [,]]) b = numpy.array([[,], [,]]) 星乘表示矩阵内各对应位置相乘,矩阵a*b下标(0,0)=矩阵a ...
- [matlab] 5.字符运算与微积分
首先介绍一下matlab里的符号计算 符号变量可以看成是数学中含参数 的表达式中的参数 matlab能进行像(a+b)(a-b)=a^2-b^2这样的计算 要进行符号计算首先要定义符号变量 定义符号对 ...
- 【转】Windows系统中ckplayer视频边下边放,视频转码mp4及"last atom in file was not a moov atom"问题
视频转码成mp4格式并添加关键帧: 1.先下载与自己操作系统相对应的的FFmpeg软件.官网传送门:http://ffmpeg.zeranoe.com/builds/ 下载static版的就可以,zi ...
- Idea突然不停indexing的问题
只要清理一下Idea的缓存和索引就可以了,在File-Invalidate Caches / Restart中,选择Invalidate and Restart,之后会重启Idea,然后就解决啦!