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

 
this.props.history.push('/article',{id:5566})携带的数据在组件中通过this.props.location.state.id获取
 

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

 
 strict为true时,表示location.pathname包含Route.path中的内容就行,Route.path结尾的反斜杠将做为匹配依据。

url-regex-path

url

是否匹配

/product/

/product

/product/

/product//

/product/xxx

4.path通配符

/hello/:name
匹配 /hello/car
匹配 /hello/bus
 
/hello/:name?
匹配 /hello 
匹配 /hello/car 
匹配 /hello/bus 
 

react-router4的使用备注的更多相关文章

  1. [web前端] react router4.0 登录后返回之前浏览页面(回到来源页)

    本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~) ...

  2. [React] 10 - Tutorial: router

    Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...

  3. 笔记react router 4(一)

    用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...

  4. 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  5. react link引入外部css样式的坑

    刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...

  6. react 开发过程中的总结/归纳

    1.点击元素,获取绑定该事件的父级元素,使用 e.currentTarget.e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素. 2.使用 react router ...

  7. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  8. react、react-router、redux 也许是最佳小实践1

    小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...

  9. React:redux+router4搭建应用骨架

    可能是短期内关于react的对后一篇笔记.假设读者对redux和router4有基本了解. 缘由: 现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即: |--componen ...

  10. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

随机推荐

  1. 【深入学习linux】Linux命令格式

    一.命令基本格式 命令提示符 [root@localhost ~]# root 代表当前登录用户,Linux当中管理员账号是 root localhost 代表主机名 ~ 代表当前所在目录(家目录), ...

  2. Linux系统中日志级别详情

    日志信息分类 1.等级由低到高:debug<info<warn<Error<Fatal; 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系 ...

  3. Oracle数据库访问客户端 sqldeveloper-18.4.0-376.1900-x64 下载

    Oracle数据库访问客户端 sqldeveloper-18.4.0-376.1900-x64 下载地址:https://pan.baidu.com/s/1RnHVuMcCNZQ7ncHLKDJ33Q

  4. Metasploit使用内网跳板, 扫描局域网主机

    最近,拿到一台内网机器, 苦于无法使用nmap扫描改主机的内网, 所以才有此文 在跳板机子获取一定权限后,需要积极的向内网主机权限发展,获取指定的目标信息,探查系统漏洞,借助msf已经得到的meter ...

  5. Web打印的解决方案之证件套打

    由于以前未接触过套打,一直觉得套打是一个比较神秘和麻烦的事情,因为打印机的位置总是需要调整的,你总不能硬编码吧?但是如果位置可调,有需要直观一些来处理,那就比较麻烦了. 在前面介绍过<Web打印 ...

  6. groupby 的妙用(注意size和count)

    Pandas的groupby()功能很强大,用好了可以方便的解决很多问题,在数据处理以及日常工作中经常能施展拳脚. 今天,我们一起来领略下groupby()的魅力吧. 首先,引入相关package: ...

  7. nginx+tomcat报400的坑

    nginx+tomcat的网页,在手机上通过浏览器可以正常访问,但是在自己的app的webview中访问就报400.查了访问日志,每次app中访问该页面,tomcat中就出现一个GET null的申请 ...

  8. html的rowspan和colspan

    https://www.jb51.net/article/165695.htm rowspan工具 https://blog.csdn.net/oxiaobaio/article/details/80 ...

  9. Centos各版本系统ISO镜像下载地址

    https://www.centos.org/download/mirrors/ 需要在里面一个个看,有些是没有旧版本镜像的 补充: 上面这个方法很难再找到旧版本了 更好的方法如下:以下载Centos ...

  10. 【maven学习】settings.xml文件详解

    环境 apache-maven-3.6.1 jdk 1.8 eclipse 4.7 Settings.xml是设置maven参数的配置文件,包含类似本地仓储位置.修改远程仓储服务器.认证信息等配置.p ...