react-router4的使用备注
1.安装
react-router是核心库,在项目中不需要安装,web开发只需安装react-router-dom、native开发安装react-router-native。
2.url参数携带与获取
Url-regex-path |
url |
挂载组件获取url参数 |
/product/:id |
/product/xxx |
this.props.match.params.id |
/article |
/article?id=xxx |
this.props.location.search 该属性的值为?id=1 |
3.Route组件的exact和strict
路由匹配的本质实际是拿window.loaction.pathname去与Route.path这个正则表达式做判断,也就是url中的问号不会影响匹配结果,因为url中的问号及后面的信息存储在window.location.pathname中
exact如果为true时,表示Route.path与location.pathname是相等关系(相等判断前先忽略Route.path结尾的/,忽略location.pathname结尾的一个反斜杠)
url-regex-path |
url |
是否匹配 |
/product或/product/ |
/product |
是 |
/product/ |
是 |
|
/product?id=xxx |
是 |
|
/product// |
否 |
|
/product/xxx |
否 |
url-regex-path |
url |
是否匹配 |
/product/ |
/product |
否 |
/product/ |
是 |
|
/product// |
是 |
|
/product/xxx |
是 |
4.path通配符
react-router4的使用备注的更多相关文章
- [web前端] react router4.0 登录后返回之前浏览页面(回到来源页)
本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- 笔记react router 4(一)
用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- react link引入外部css样式的坑
刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...
- react 开发过程中的总结/归纳
1.点击元素,获取绑定该事件的父级元素,使用 e.currentTarget.e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素. 2.使用 react router ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- react、react-router、redux 也许是最佳小实践1
小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...
- React:redux+router4搭建应用骨架
可能是短期内关于react的对后一篇笔记.假设读者对redux和router4有基本了解. 缘由: 现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即: |--componen ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
随机推荐
- 【深入学习linux】Linux命令格式
一.命令基本格式 命令提示符 [root@localhost ~]# root 代表当前登录用户,Linux当中管理员账号是 root localhost 代表主机名 ~ 代表当前所在目录(家目录), ...
- Linux系统中日志级别详情
日志信息分类 1.等级由低到高:debug<info<warn<Error<Fatal; 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系 ...
- Oracle数据库访问客户端 sqldeveloper-18.4.0-376.1900-x64 下载
Oracle数据库访问客户端 sqldeveloper-18.4.0-376.1900-x64 下载地址:https://pan.baidu.com/s/1RnHVuMcCNZQ7ncHLKDJ33Q
- Metasploit使用内网跳板, 扫描局域网主机
最近,拿到一台内网机器, 苦于无法使用nmap扫描改主机的内网, 所以才有此文 在跳板机子获取一定权限后,需要积极的向内网主机权限发展,获取指定的目标信息,探查系统漏洞,借助msf已经得到的meter ...
- Web打印的解决方案之证件套打
由于以前未接触过套打,一直觉得套打是一个比较神秘和麻烦的事情,因为打印机的位置总是需要调整的,你总不能硬编码吧?但是如果位置可调,有需要直观一些来处理,那就比较麻烦了. 在前面介绍过<Web打印 ...
- groupby 的妙用(注意size和count)
Pandas的groupby()功能很强大,用好了可以方便的解决很多问题,在数据处理以及日常工作中经常能施展拳脚. 今天,我们一起来领略下groupby()的魅力吧. 首先,引入相关package: ...
- nginx+tomcat报400的坑
nginx+tomcat的网页,在手机上通过浏览器可以正常访问,但是在自己的app的webview中访问就报400.查了访问日志,每次app中访问该页面,tomcat中就出现一个GET null的申请 ...
- html的rowspan和colspan
https://www.jb51.net/article/165695.htm rowspan工具 https://blog.csdn.net/oxiaobaio/article/details/80 ...
- Centos各版本系统ISO镜像下载地址
https://www.centos.org/download/mirrors/ 需要在里面一个个看,有些是没有旧版本镜像的 补充: 上面这个方法很难再找到旧版本了 更好的方法如下:以下载Centos ...
- 【maven学习】settings.xml文件详解
环境 apache-maven-3.6.1 jdk 1.8 eclipse 4.7 Settings.xml是设置maven参数的配置文件,包含类似本地仓储位置.修改远程仓储服务器.认证信息等配置.p ...