作用:把不是通过路由切换过来的组件中,将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. 离线语音识别,vosk,离线流式实时静音噪声监测,支持多语言开发python c++ c# java等

    #!/usr/bin/env python3 from vosk import Model, KaldiRecognizer, SetLogLevel import sys import os imp ...

  2. 力扣41(java)-缺失的第一个正数(困难)

    题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数. 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案. 示例 1: 输入:nums = [1,2,0 ...

  3. 力扣498(java)-对角线遍历(中等)

    题目: 给你一个大小为 m x n 的矩阵 mat ,请以对角线遍历的顺序,用一个数组返回这个矩阵中的所有元素. 输入:mat = [[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,4 ...

  4. 力扣394(java)-字符串解码(中等)

    题目: 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k 保证为正整数 ...

  5. [GPT] 提高个人网站的访问量的 30 种详细方式

    内容优化:提高网站的质量和价值,让用户喜欢并分享你的内容. SEO优化:通过关键词优化.网站结构优化等方式,提高搜索引擎排名. 社交媒体:在社交媒体上分享你的内容,吸引更多人来访问你的网站. 广告投放 ...

  6. [Pholcus] Go项目 Pholcus 源码逻辑分析 species.go

    「代码结构」 结构体:蜘蛛种类列表(即:蜘蛛规则列表) 变量:全局蜘蛛种类实例 方法:向蜘蛛种类清单添加新种类 方法:获取全部蜘蛛种类 方法:通过名字获取蜘蛛 「总体功能」 添加新种类:通过 Spid ...

  7. WPF 将控件放入到 UserControl 里获取 HwndSource 为空的情况

    本文记录将 WPF 控件放入到 UserControl 里,如果此 UserControl 没有被设置 Visibility 为可见过,那么放在此 UserControl 内的控件将获取不到 Hwnd ...

  8. dotnet 通过 DockerfileContext 解决项目放在里层文件夹导致 VisualStudio 构建失败

    本文告诉大家,如何解决 csproj 项目文件放入到里层的文件夹,不放在 sln 所在文件夹的第一层子文件夹,导致 VisualStudio 2022 在构建 docker 映像提示找不到文件的问题 ...

  9. SpringBoot3.1.5对应新版本SpringCloud开发(2)-Eureka的负载均衡

    Eureka的负载均衡 负载均衡原理 负载均衡流程 老版本流程介绍 当order-servic发起的请求进入Ribbon后会被LoadBalancerInterceptor负载均衡拦截器拦截,拦截器获 ...

  10. 用 Certbot-auto 在 letsencrypt.org申请免费 SSL 证书实现 HTTPS

    参考帖子 https://www.cnblogs.com/lzpong/p/6433189.html https://www.cnblogs.com/756623607-zhang/p/1163850 ...