高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
// withRouter实现原理:
// 将组件包裹进 Route, 然后返回
// const withRouter = () => {
// return () => {
// return <Route component={Nav} />
// }
// }
// 这里是简化版
const withRouter = ( Component ) => () => <Route component={ Component }/>
上面是实现的原理, react-router-dom 里面是有这个组件的, 直接引入使用就可以了
import React from 'react'
import './nav.css'
import {
NavLink,
withRouter
} from "react-router-dom"
class Nav extends React.Component{
handleClick = () => {
// Route 的 三个对象将会被放进来, 对象里面的方法可以被调用
console.log(this.props);
}
render() {
return (
<div className={'nav'}>
<span className={'logo'} onClick={this.handleClick}>掘土社区</span>
<li><NavLink to="/" exact>首页</NavLink></li>
<li><NavLink to="/activities">动态</NavLink></li>
<li><NavLink to="/topic">话题</NavLink></li>
<li><NavLink to="/login">登录</NavLink></li>
</div>
);
}
}
// 导出的是 withRouter(Nav) 函数执行
export default withRouter(Nav)
所以withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.
在这个例子中, 我将span使用withRouter作为一个可点击跳转的Link
作者：Veycn
链接：https://www.jianshu.com/p/8d3cf411a639
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章浏览阅读511次，点赞5次，收藏3次。现在学习vue3,vite,使用pnpm创建项目都需要高版本的nodejs了，win7最高只能安装13版本，好多已经不支持了。那么我们安装的16.4.0版本在写项目时基本都可以使用，当然此篇只是以安装16.4.0为例，可以替换成更高的18或者20版本，只是太高的话可能出现冲突，够用就好。希望对各位小伙伴有帮助。_node16要win几
文章浏览阅读1.9k次。nRF Connect for Desktop是一个跨平台工具框架，用于协助nRF设备上的开发。它包含许多应用程序来测试，监控，测量，优化和编程你的应用程序。Power Profiler就是这个框架里面的其中一个应用。问题就出在安装应用的环节，如果访问Nordic的网站速度较慢，nRF Connect for Desktop安装应用经常出现ERROR，无法安装完成。_power profiler
文章浏览阅读1.1k次。参考:http://blog.csdn.net/myarrow/article/details/12105973一、概略根据章节一的内容我们大致了解了android系统的input子系统的一些信息，但是有时候系统自动提供的input事件却并不能满足我们的实际需求，android系统针对这个也为我们提供了uinput。二、APIuinput_user_dev 基于Android..._android 系统添加自定义input事件
文章浏览阅读68次。其中XC7VX690T-2FFG1761扇出2个FMC接口 ，通过每个FMC接口可向外部提供82对高速差分线（含2对差分时钟线）、 10组共20对超高速DP 差分对及2对超高速差分时钟线。其中XC7VX690T-2FFG1761搭配2组共10片（每组其中1片作为ECC校验）16bit 4Gb的DDR3-1866SD RAM, XC7VX690T-2FFG1927搭配5片（其中1片作为ECC校验）相同规格的DDR3SDRAM和1片36Mb的QDRII SRAM。—支持—个M.2 SATA接口；
文章浏览阅读1.3k次。文章目录一、查找要安装的镜像版本二、安装命令详解二、Docker安装案例1、安装MySQL2、安装Redis3、安装JDK4、安装RabbitMQ一、查找要安装的镜像版本docker search $NAME其他用到的命令，参考《Docker的常用命令大全》。二、安装命令详解docker run -d -p 6379:6379 -v /data/redis:/var/redis --name redis redisdocker run：启动containerredis：要启动的image_dockerui安装
文章浏览阅读839次。概述想知道mysql dba运维面试时都会被问到哪些问题吗？特整理出20个运维经典面试题供大家参考学习，据说知道一半答案的人，月薪能过万~1、MySQL的复制原理以及流程基本原理流程，3个线程以及之间的关联；(1)主：binlog线程——记录下所有改变了数据库数据的语句，放进master上的binlog中；(2)从：io线程——在使用start slave 之后，负责从master上拉取 binl..._dba运维面试题
文章浏览阅读7.3k次，点赞9次，收藏64次。Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1 HTML1.1.1 HTML简介HyperText Mark-up Language, 指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的, 格式: <标签名></标签名>1.1.2 HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中的使用vscode是由微软研_python前端开发
文章浏览阅读263次，点赞5次，收藏10次。使用Leaflet.glify提升Web地图性能的技术解析与推荐项目地址:https://gitcode.com/robertleeplummerjr/Leaflet.glify在GIS应用和Web地图开发中，高效、流畅的表现力是用户体验的关键。Leaflet.glify是一个非常有趣的开源项目，它将流行的 Leaflet JavaScript 库与 WebGL 技术相结合，以提供更高效的地图..._leaflet.glify
文章浏览阅读598次。By 刘未鹏(pongba) C++的罗浮宫(http://blog.csdn.net/pongba) 前言 我的blog以前很长一段时间关注的都是C++中的技术&细节，乃至于读者和应者都寥寥。然而5月份的时候写的一篇“你应当如何学习C++”，阅读量却达到了3万多，在blog上所有文章中却是最高的（且远远超过了第二位）；评论数目也有一百多。为什么独独这篇能够激起这么多的回应，想必是国内的
文章浏览阅读683次。CTFHUB SQL_ctfhub sql注入-1
文章浏览阅读1.6w次，点赞22次，收藏334次。Web端和App端测试的区别Web项目是B/S架构，基于浏览器的。App项目是C/S架构，必须要有客户端，用户需要安装客户端。对于更新版本，Web项目只需要更新服务端，客户端就会同步更新，而App项目需要客户端和服务端都同时更新。Web端和App端测试的区别包括以下：①从测试流程上看，基本没有区别。都是需要经历测试计划方案、用例设计、用例执行、缺陷管理、测试报告编写等相关活动。②从测试类型上，基本相似。都需要功能测试、性能测试、安全性测试、GUI测试等。web测试是基于浏览器的，所以不用考虑安装_app端和web端测试区别
文章浏览阅读1.6k次。exec函数，可以循环定义、赋值多个变量exec ("temp%s=1"%1)这段代码的意思是，让exec执行temp1=1。字符串里面的%s由‘1'代替了。我们在外面再套一个循环就可以实现对多个变量的定义了。for i in range(10):exec ("temp%s=1"%i)在这里，通过一个循环来生成10个变量，i的变化从0到9。用变量i替代%s，所以在每次循环里面，分别给temp0、t..._如何在嵌套循环中使用多个循环变量?