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

默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/uri')跳转到对应路由的页面,然而不是所有组件都直接与路由相连的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props

// 引入withRouter

import { withRouter} from 'react-router-dom'

// 执行一下withRouter

export default withRouter(Cmp)

react withRouter高阶组件的更多相关文章

  1. React使用高阶组件与Hooks实现权限拦截教程

    导读 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数.这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧 高阶 ...

  2. 【转】react的高阶组件

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

  3. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  4. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  5. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  6. react用高阶组件实现路由守卫

    react-router不像vue-router一样有很多钩子函数,可以做路由守卫.想实现路由守卫,可以用高阶组件来实现. @connect(state => ({ isLogin: state ...

  7. react之高阶组件(一)

    当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...

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

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

  9. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  10. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

随机推荐

  1. var ,let和const三者之间的区别

    var 声明变量可以被修改,可以被重复声明.有变量提升(写的位置和使用时候的位置不一样). let声明变量可以被修改,,但不能重复声明.如文件中有一个let a = 0;后面就不能在定义let a=* ...

  2. 力扣977(Java)-有序数组的平方(简单)

    题目: 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序. 示例 1: 输入:nums = [-4,-1,0,3,10]输出:[0,1, ...

  3. 基于 Serverless 架构的头像漫画风处理小程序

    ​简介: 当一个程序员想要个漫画风的头像时... 前言 我一直都想要有一个漫画版的头像,奈何手太笨,用了很多软件 "捏不出来",所以就在想着,是否可以基于 AI 实现这样一个功能, ...

  4. 璀璨智行:V2X车路协同智慧交通

    ​V2X车用无线通信技术是指车对外界的信息交换,作为未来智能交通运输系统的关键技术,璀璨智行潜心研究V2X技术,致力于V2X车路协同的落地,在智慧交通领域做出了卓越的贡献. 创业机会点 魏军博表示:& ...

  5. JVM性能提升50%,聊一聊背后的秘密武器Alibaba Dragonwell

    ​简介: 你要知道的关于Alibaba Dragonwell一些重要优化措施. ​ 今年四月五日,阿里云开放了新一代ECS实例的邀测[1],Alibaba Dragonwell也在新ECS上进行了极致 ...

  6. 当微服务遇上 Serverless | 微服务容器化最短路径,微服务 on Serverless 最佳实践

    ​简介: 阿里云Serverless应用引擎(SAE)初衷是让客户不改任何代码,不改变应用部署方式,就可以享受到微服务+K8s+Serverless的完整体验,开箱即用免运维. 前言 微服务作为一种更 ...

  7. [GPT] nodejs 什么情况下可以使用 import 来引入 export 的模块

    在 Node.js 中,原生并不支持 ES6 的 import 语句来引入模块. 不过从 Node.js v12 开始,通过实验性功能(--experimental-modules)可以使用 .mjs ...

  8. [Go] 浅谈 gorm 执行 AutoMigrate 的两种时机

    第一种就是直接在操作 model 的逻辑中,执行 db.AutoMigrate,模型没有更新时不会有 schema 相关的 sql 被执行. 第二种就是单独定义一个属于 main 包的 go 文件,专 ...

  9. 2019-11-29-如何入门-C++-AMP-教程

    title author date CreateTime categories 如何入门 C++ AMP 教程 lindexi 2019-11-29 08:20:37 +0800 2018-2-13 ...

  10. Java开启异步的两种方式

    二.Java开启异步的两种方式 1.注解开启:@Async 1.1.配置异步的线程池 必须配置异步线程池,否则异步不会生效. @EnableAsync 注解:指定异步线程池.不指定默认使用:Simpl ...