作用:

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.

把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上

1. 默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/ ')跳转到对应路由的页面
然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props
2. 高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.此时这个组件就具备了路由的属性
 
使用withRouter:
比如app.js这个组件,一般是首页,不是通过路由跳转过来的,而是直接从浏览器中输入地址打开的,如果不使用withRouter此组件的this.props为空,没法执行props中的history、location、match等方法
 1 import { Switch, Route, Redirect, withRouter } from "react-router-dom";
2
3 import Home from "./components/Home.jsx";
4 import User from "./components/User.jsx";
5
6 class App extends React.Component {
7 constructor(props) {
8 super(props)
9 console.log(props) // 此时props里就具备了路由对象
      props.history.listen((e) => {           // 只要是具备路由功能的组件都可以使用这个方法,参数接收一个回调函数
           console.log(e, '路由参数的变化')
         })
10   }
11 render() {
12 return (
13 <div>
14 <Switch>
15 <Redirect from="/" to="/home" exact />
16 <Route exact path="/home" component={Home}></Route>
17 <Route exact path="/user" component={User}></Route>
18 </Switch>
19 </div>
20 );
21 }
22 }
23
24 export default withRouter(App); //参数是一个组件,返回一个组件
 
props.history.listen()
只要是具备路由功能的组件都可以使用这个方法,参数接收一个回调函数,但是是有切换页面时才会触发这个方法,很像vue中的组件内的钩子,当路由变化的时候做一些事情

props.history.listen((e) => {  console.log(e, '开启了withRouter')  })

高阶组件——withRouter的原理和用法的更多相关文章

  1. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  2. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  3. react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)

    第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...

  4. 高阶组件(Higher-Order Components)

    有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步.但是其实这些名词背后所代表的东西其实很简单. 我不能说高阶组件就是这么一个东西.但是它是一个概念上很简单 ...

  5. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  6. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

  7. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  8. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

  9. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  10. react高阶组件

    高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...

随机推荐

  1. PCB封装设计建议:

    1,通孔型元器件建议孔直径比元器件管脚直径大0.2-0.3mm左右,焊盘铜皮外沿一般是0.3-1mm(相当于直径应该加0.6-2mm)宽大元件可再大一点,对于设计单面板的,则最小铜皮外沿应大于1mm以 ...

  2. Eclipse's Import error and remove

    1.导入项目之前,请确认工作空间编码已设置为utf-8:window->Preferences->General->Wrokspace->Text file encoding- ...

  3. List<dto> 转List<map>

    /** * list<DTO> 转 list<Map<String,Object>> * * @param list * @param <T> * @r ...

  4. SqlServer 高并发的情况下,如何利用锁保证数据的稳定性

    sql的锁机制,是时刻贯彻在每一次的sql事务中的,为了理解更透彻,介绍锁之前,我们得先了解,锁是为了干什么!! 1.数据库异常情况 1.1 先来聊聊数据可能发生个异常状况 1)脏读:读未提交,顾名思 ...

  5. RTE2021 回顾丨实践中的摸爬滚打,AI OPS 落地之路

    本文整理自声网Agora SD - RTN 网络传输质量负责人于涛在 RTE2021 实时互联网大会上的演讲分享.他在演讲中针对传统 OPS 痛点.AI OPS 的优势以及 AI OPS 工程化的难点 ...

  6. RHCE服务----DNS

    实验要求: 1.建立DNS服务器,负责解析的域为openedu.com 2.要求将MX记录指向mail.openedu.com,且对应A记录为本机IP 3.要求将NS记录指向ns1.openedu.c ...

  7. Python——基础知识(一)

    1. 那么多编程语言,为什么学python 易于学习,是所有编程语言当中最容易学习的 没有最好的语言,只有最合适的语言 2. 反复执行的用例如何提升效率 测试流程回归(回顾) 很多测试用例在不同的测试 ...

  8. MATLAB计算变异函数并绘制经验半方差图

      本文介绍基于MATLAB求取空间数据的变异函数,并绘制经验半方差图的方法.   由于本文所用的数据并不是我的,因此遗憾不能将数据一并展示给大家:但是依据本篇博客的思想与对代码的详细解释,大家用自己 ...

  9. JAVA基础——常用类(一)

     首先认识到--String是不可以变性(final) String:字符串,使用一对""引起来表示.      * 1.String声明为final的,不可被继承      * ...

  10. 技术分享:Proxy-Pool代理池搭建IP代理

    技术分享:Proxy-Pool代理池搭建IP代理 前言本章内容仅供参考,不涉及实际使用,主要使用Python环境和Redis数据库进行环境搭建,工具网盘存储如下,有问题可以私聊我.网址:https:/ ...