作用:把不是通过路由切换过来的组件中,将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. 《Effective C#》系列之(三)——充分利用C#语言的新功能

    在<Effective C#>这本书中,利用C#语言的新功能是其中一章的内容.以下是该章节的一些核心建议,以及使用C#代码示例说明: 利用自动属性:在C# 3.0中引入了自动属性,可以大大 ...

  2. Oracle sql 判断全角字符

    (lengthb(MC) - length(MC))<>(lengthb(to_single_byte(MC)) - length(to_single_byte(MC)))

  3. 跨全端SDK技术演进

    简介: 细想,团队进行跨平台开发已有三年有余,也是集团里面C++方向里比较早涉及该领域的部门之一,伴随业界跨平台技术发展与演进,我们也沉淀了一整套基于C++的跨平台技术体系,本文将以消息SDK为例,详 ...

  4. SpringCloud 应用在 Kubernetes 上的最佳实践 —— 高可用(弹性伸缩)

    作者 | 三未 前言 弹性伸缩是一种为了满足业务需求.保证服务质量.平衡服务成本的重要应用管理策略.弹性伸缩让应用的部署规模能够根据实时的业务量产生动态调整,在业务高峰期扩大部署规模,保证服务不被业务 ...

  5. 阿里云CDN产品经理陈章炜:边缘创新技术和落地实践

    简介: CDN除了加速外,不断被赋予更多价值.在阿里云CDN推出的<极速奔跑吧 2021>首场直播中,阿里云架构师和产品经理不仅对近期阿里云发布的CDN产品最佳实践图进行了详细解读,还对C ...

  6. [GPT] swoole的协程和golang的协程有什么区别,哪个更好

    Swoole 的协程和 Golang(Go 语言)的协程(Goroutine)在概念上都是为了实现轻量级的并发编程,但它们在具体实现.使用方式和性能特点上有所不同: 实现原理: Golang 协程(G ...

  7. [GPT] 哪些职业面临 AI 威胁?

      随着人工智能技术的不断发展和应用,一些重复性.机械化或标准化程度高的职业可能会面临被自动化取代的威胁.例如: 工厂生产线上的装配工人,因为许多工厂已经开始使用自动化机器人完成装配任务: 行政助理, ...

  8. 2024 年最值得推荐的 7 个 Vue3 组件库

    你好,我是 Kagol. Vue 是一款易学易用,性能出色,适用场景丰富的渐进式 JavaScript 框架,深受广大开发者的喜爱,Vue3 更是推出了 Composition API,让逻辑复用更友 ...

  9. WPF 如何在静态资源定义字体大小

    默认的 WPF 的字体大小的单位是像素,如果想要将字体大小使用 pt 点表示,写在 xaml 里面是直接添加 pt 后缀.但是此时如果在静态资源尝试定义的时候写上了 pt 将会在运行的时候提示无法转换 ...

  10. 通俗易懂的生产环境Web应用架构介绍

    前言 看见一篇非常通俗易懂且适合新手阅读的Web应用架构文章,我将其手工翻译了出来,分享给大家. 也可以去阅读英文原文,标题为,贴出链接: https://stephenmann.io/post/wh ...