当前位置: 首页 > news >正文

React antd umi 监听当前页面离开,在菜单栏提示操作

需求是我这里有个页面,离开当前页面之后,需要在菜单栏显示个提示,也就是Tour

const [unblock, setUnblock] = useState<() => void>(() => () => {});const [next, setNext] = useState('');useEffect(() => {const unblockHandler = history.block(({ action, location }) => {if (action === 'PUSH' || action === 'REPLACE') {setNext(location.pathname);setLogoTourOpen(true);return false;}});setUnblock(() => unblockHandler);return () => {unblockHandler();};}, [history]);const handleTourClose = () => {setLogoTourOpen(false);unblock?.();if (next) {history.push(next);}};const [refs1, setRefs1] = useState<(Element | null)[]>([]);const [openLogoTour, setLogoTourOpen] = useState<boolean>(false);const steps2: TourProps['steps'] = [{title: '',description: `You can click on the logo to easily logo back to the Get Started page `,target: () => refs1[0],placement: 'bottom',nextButtonProps: {children: <span>OK, I know</span>,},},];
// 放在组件里就行<Touropen={openLogoTour}onClose={() => {setLogoTourOpen(false);updateGettingStartedInfo('logoPage');handleTourClose();}}steps={steps2}/>

http://www.lryc.cn/news/390675.html

相关文章:

  • 在 Windows PowerShell 中模拟 Unix/Linux 的 touch 命令
  • 鸿蒙NEXT
  • VUE3-Elementplus-form表单-笔记
  • Analyze an ORA-12801分析并行 parallel 12801 实际原因
  • 高级运维工程师讲述银河麒麟V10SP1服务器加固收回权限/tmp命令引起生产mysql数据库事故实战
  • 昇思25天学习打卡营第09天|sea_fish
  • flutter开发实战-Charles抓包设置,dio网络代理
  • Elasticsearch:Runtime fields - 运行时字段(二)
  • Python正则表达式的入门用法(上)
  • Audio Processing Graphs 管理 Audio Units
  • 欧盟,又出了新规-通用充电器新规通用充電器的 RED 修正案如何办理?
  • thinkphp6/8 验证码
  • Ubuntu 22.04 LTS 上安装 MySQL8.0.23(在线安装)
  • 如何选择优质模型?SD3性能究竟如何?
  • Linux上脚本备份数据库(升级版)
  • 【深度解析】滑动窗口:目标检测算法的基石
  • 约束:对于数据的限制
  • 【总线】AXI4第七课时:AXI的额外的控制信息(PROT和CACHE)
  • MAVEN 重新配置参考
  • ByteTrack论文阅读笔记
  • LVS+Keepalived 高可用集群搭建实验
  • 代码随想三刷动态规划篇7
  • linux应用开发基础知识(八)——内存共享(mmap和system V)
  • 上海小程序开发需要进行定制开发吗?
  • Qt开发 | qss简介与应用
  • 模块一SpringBoot(一)
  • C语言 | Leetcode C语言题解之第213题打家劫舍II
  • ​​​​Linux LVS 负载均衡群集
  • onTouch()与onTouchEvent()的区别
  • 计算机网络网络层复习题2