记录一次withRouter的实际应用场景

在项目中经常会使用到面包屑，

所以想结合antDesign里面的Breadcrumb做一次封装

封装后的面包屑能完成路由的跳转

但是作为独立的组件 Breadcrumb是拿不到路由信息的

如果每次在页面组件去传递又略显麻烦

所以在React-router的官网中，找到了React Router中提供的withRouter方法

withRouter的作用有点类似于Redux中的connect，把要获取路由信息的组件传入with-Router，withRouter会把路由信息传递给该组件，并会返回一个新的组件，来方便其他地方调用

import React, { ReactNode } from 'react';
import { Breadcrumb } from 'antd';
import { Link ,HashRouter,withRouter} from 'react-router-dom';const BreadcrumbCustom = (props) => {const { breads } = props;const firstPageBtn = (props)=>{let { history } = props;console.log('history=========>',history);return(<span onClick={()=>{history.goBack()}}>首页</span>)};const FirstPageBtn = withRouter(firstPageBtn);console.log('FirstPageBtn=========>',FirstPageBtn)return (<Breadcrumb style={{ margin: '12px 0' }}><Breadcrumb.Item><FirstPageBtn/></Breadcrumb.Item>{breads.map((bread, i) => (<Breadcrumb.Item key={i}>{bread}</Breadcrumb.Item>))}</Breadcrumb>);
};export default BreadcrumbCustom;

import React from "react";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom/BreadcrumbCustom";const ReactTech = (props)=>{console.log(props)return (<div className='ReactTech'><BreadcrumbCustom breads={['技术','react']}/>ReactTech</div>)
};
export default ReactTech;

尽管这样做，已经实现了点击首页能跳转；

但是将来出现四级，五级页面的时候，就需要做到点击任何一个面包屑都能实现路由跳转

于是我想把history传到外面来，于是改进一下代码

const BreadcrumbCustom = (props) => {const [History,setHistory] = useState(null);const { breads } = props;const firstPageBtn = (props)=>{let { history } = props;setHistory(history);console.log('history=========>',history);return(<span onClick={()=>{history.goBack()}}>首页</span>)};const FirstPageBtn = withRouter(firstPageBtn);console.log('FirstPageBtn=========>',FirstPageBtn)return (<Breadcrumb style={{ margin: '12px 0' }}><Breadcrumb.Item><FirstPageBtn/></Breadcrumb.Item>{breads.map((bread, i) => (<Breadcrumb.Item key={i} onClick={()=>{History.push('/business$/richText')}}>{bread}</Breadcrumb.Item>))}</Breadcrumb>);
};

但是这个方法似乎不太高级，所以我觉得用Hook来试试：

Router 5.x中新增加了Router Hooks

1）useHistory调用该Hook会返回history对象。

2）useLocation调用该Hook会返回location对象。

3）useRouteMatch调用该Hook会返回match对象。

4）useParams调用该Hook会返回match对象中的params，也就是path传递的参数。

import React, {ReactNode, useState} from 'react';
import { Breadcrumb } from 'antd';
import { Link ,HashRouter,withRouter,useHistory} from 'react-router-dom';const BreadcrumbCustom = (props) => {const History = useHistory();const { breads } = props;const firstPageBtn = (props)=>{let { history } = props;console.log('history=========>',history);return(<span onClick={()=>{history.goBack()}}>首页</span>)};const FirstPageBtn = withRouter(firstPageBtn);console.log('FirstPageBtn=========>',FirstPageBtn)return (<Breadcrumb style={{ margin: '12px 0' }}><Breadcrumb.Item><FirstPageBtn/></Breadcrumb.Item>{breads.map((bread, i) => (<Breadcrumb.Item key={i} onClick={()=>{History.push('/business$/richText')}}>{bread}</Breadcrumb.Item>))}</Breadcrumb>);
};export default BreadcrumbCustom;

记录一次withRouter的实际应用场景相关推荐

dns解析和mx记录冲突场景
最近公司邮箱服务无法正常收发从国外过来的邮件,一直找不到原因,但是大部分邮件都能正常接收到. 今天收到C家的邮件也无法正常发送过来,再对方的mail trace里面看到deferrd记录,显示邮箱地址 ...
多条记录取最近日期的一条_Excel VBA：基于员工打卡记录的考勤数据统计
微信公众号:金融数学使用VBA做一个基于员工打卡记录的考勤数据分析工具; 1应用场景某公司通过门禁系统记录了每位员工上下班打卡时间,现在需要对一段特定时间内员工出勤情况进行统计分析,包含加班时间( ...
kafka 脚本发送_Kafka笔记归纳（第五部分:一致性保证，消息重复消费场景及解决方式）...
写在开头: 本章是Kafka学习归纳第五部分,着重于强调Kafka的事一致性保证,消息重复消费场景及解决方式,记录偏移量的主题,延时队列的知识点. 文章内容输出来源:拉勾教育大数据高薪训练营. 一致性 ...
操作系统之进程管理：10、信号量机制(整形、记录型)
10.信号量机制思维导图信号量机制的引入什么是信号量机制信号量的分类整形信号量记录型信号量思维导图信号量机制的引入来看几个问题. 1.在用软件实现进程互斥的时候,双标志先检查算法由于 ...
oracle sql的应用场景,oracle 3个适用sql场景
我们使用oracle做一些统计的时候,时常碰到如下场景: 1.竖列转横列 2.分组并合并某列作为结果集 3.分组排序取首条记录我们使用一个简化的业务场景,来展示这三个场景如何使用sql来解决. 业务 ...
Unity实现跨场景的传送门
Unity实现跨场景的传送门目录 Unity实现跨场景的传送门引言视频效果具体实现门数据场景异步加载关于门的特效引言之前写过一篇文章--<Unity第一人称可视化传送门制作& ...
区块链第一个落地场景，居然是“发票”？
文 | 比萨发票,已经成为区块链在国内落地最快的领域之一. 2018年8月,深圳国贸旋转餐厅开出全国第一张区块链发票.半年后,深圳每个月就能开出近100万张区块链发票. 天时.地利.人和,区块链发票 ...
【已解决】数据库常见场景应用计算次日留存率
记录一个数据库中常见的应用场景,需要计算用户次日留存率(次留分析),查询出计算的用户留存率. 结合这个应用背景,牛客网站上的 SQL29 计算用户的平均次日留存率非常适合拿来练习,下面就以牛客上的这 ...
HSC32C1调试记录
HSC32C1调试记录 hsc32c1调试驱动iso7816接口: 场景:通过7816接口使hsc32c1和MCU通讯,保证hsc32c1中的代码不被破解 1.上位机PCSC_Reload安装后不能打 ...

记录一次withRouter的实际应用场景

记录一次withRouter的实际应用场景相关推荐

最新文章

热门文章