表单控件

受控表单组件
非受控的表单组件 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 学习的更多相关文章

  1. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  2. react 详细解析学习笔记

    React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用       spa(单页面应用) react 组件化模块化  开发模式 React通过对DOM的模拟 ...

  3. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  4. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  5. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  6. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  7. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  8. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  9. react路由配置(未完)

    React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...

随机推荐

  1. Cobalt Strike 服务器搭建及使用

    Cobalt Strike使用中的一些坑(一) http://www.cnblogs.com/miaodaren/articles/7829793.html cobaltstrike3.8服务器搭建及 ...

  2. python3内置函数练习

    1. abs() abs() 函数返回数字的绝对值. print(abs(1.5236)) # 1.5236 print(abs(1.0)) # 1.0 2. all() all() 函数用于判断给定 ...

  3. 使用selenium时,使用从系统启动浏览器与通过自动化驱动方式启动浏览器控件ID不一样解决方法

    最近遇到一个怪事,通过正常打开浏览器,按照正常的web登录然后点击进入系统流程,将各控件的ID识别成功,然后使用 python3+selenium写好脚本,高高兴兴的用脚本跑时老是提示找不到控件,然后 ...

  4. 查看linux中的TCP连接数

    一.查看哪些IP连接本机 netstat -an 二.查看TCP连接数 1)统计80端口连接数netstat -nat|grep -i "80"|wc -l 2)统计httpd协议 ...

  5. php面试题整理(二)

    索引,desc 和explain unset只是删除了变量名

  6. [matlab] 22.matlab图论实例 最短路问题与最小生成树 (转载)

    最短路问题之 Floyd 某公司在六个城市 c1c1,c2c2,….,c6c6 中有分公司,从 cici 到 cjcj 的直接航程票价记在下述矩阵的 (ii,jj) 位置上. (∞∞表示无直接航路), ...

  7. ssm框架的整合搭建(一)

    一个转行菜鸟半年多工作的开始学习历程............ 我是自学,也是我的记录,我学习的见证,如果你有幸看见,不要吐槽,不足之处请指点,相互学习,谢谢!! 请一起共勉!!!!!!!! 使用技术: ...

  8. [教程]教你如何制作彩色的3D打印Groot

    http://mc.dfrobot.com.cn/forum.php?mod=viewthread&tid=24916 准备工作: <ignore_js_op>  3D打印高精度G ...

  9. rman list 命令列举

    转 在使用RMAN备份.还原的过程中,我们经常需要查看备份的一些详细信息,例如,RMAN提供了LIST命令.关于LIST命令的详细信息 可以参考Oracle Database Backup and R ...

  10. Pycharm 自定义快捷键

    之前使用 Eclipse 时,快捷键 Ctrl + M 会使当前窗口最大化.这里配置 PyCharm 具有相同功能. 1)打开 File  >  Settings  >  Keymap 2 ...