react获取访问过的路由历史记录

看了下,好像没有很好的解决方案,之前的useHistory现在也用不了了,

chatgpt说使用useMatch,也报错

看了下浏览器原生的。本来浏览器就会限制这个histroy的读取,只能获取length

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/history

那考虑useEffect每次在location.pathname 进行变化的时候,直接进行存取队列。~~ 自己手动做吧。


const RouterComponent = (router: any) => {const location = useLocation()// 每一次路由变化的时候,去更新useEffect(() => {store.dispatch(setLastRouter(location.pathname))}, [location.pathname])return (<><Routes>{routers.map((router) => (<Routepath={router.path}element={router.authentication ? (<Authentication>{router.element}</Authentication>) : (router.element)}key={router.path}></Route>))}</Routes></>)
}

然后

import { PayloadAction, createSlice } from "@reduxjs/toolkit"
import { RootState } from "./store"interface taskState {router: { lastRouter: null; currentRouter: null }
}
const initialState: taskState = {router: { lastRouter: null, currentRouter: null },
}export const taskSlice = createSlice({name: "task1111",initialState,reducers: {setLastRouter: (state, action: PayloadAction<any>) => {state.router.lastRouter= state.router.currentRouterstate.router.currentRouter = action.payload}},
})export const { setLastRouter } = taskSlice.actions
export const selectLastRouter = (state: RootState) => state.task.router.lastRouter
export default taskSlice.reducer

但是,发现有问题啊啊啊,store的更新是惰性的,

chatgpt说,可以给他强制更新,但好像又不太好,如果需要所有的历史长度,或许可以

this.forceUpdate(); // 强制重新渲染组件

或者包一个connect
export default connect(mapStateToProps, mapDispatchToProps, null, { shouldComponentUpdate: () => true })(Counter);

(未验证)

后来请教了下大神,实际上可以在组件销毁方法里去监听,原理和去监听路由一样的,而且这样可以更好的~去维护,不用浪费全局的router资源。

【销毁组件的方法就更简单了……直接useEffect里return出去就行,用的少竟然忘记掉了】

这样每次读去到type的时候,可以再去取消掉,有点类似订阅的机制,总之更好管理。

感叹一下还是得

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/870506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序问题

1.获取节点 wx.createSelectorQuery() wx.createSelectorQuery().in(this) //组件中加in(this)&#xff0c;不然获取不到 2.使用实例 wx.createSelectorQuery().in(this).select(#share).fields({node: true,size: true}).exec(async (res) > {const canvas res[0].node;…

java org.aeonbits.owner库介绍

org.aeonbits.owner 是一个用于简化Java应用程序配置管理的库。它通过使用接口和注解来定义和读取配置,使得配置管理更加简洁和类型安全。以下是对这个库的一些主要特性和功能的介绍: 主要特性 类型安全的配置: OWNER 库允许开发者使用接口定义配置,从而提供了编译时的类型…

通过window.postMessage,跨域传递数据

第一个项目的代码&#xff0c;项目地址 http://localhost:5173/ 第二个项目的代码&#xff0c;项目地址 http://localhost:5174/ 点击按钮会打开第二个项目的页面 第二个项目的页面

【LeetCode】最长连续序列

目录 一、题目二、解法完整代码 一、题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nu…

Rust代码优化的九大技巧

一.使用 Cargo 内置的性能分析工具 描述&#xff1a;Cargo 是 Rust 的包管理器&#xff0c;带有内置工具来分析代码性能&#xff0c;以识别性能瓶颈。 解释&#xff1a; 发布模式&#xff1a;在发布模式下编译启用优化&#xff0c;可以显著提高性能。 cargo build --release基…

StarRocks下载使用说明和基础操作

简介 StarRocks 是一款高性能分析型数据仓库&#xff0c;使用向量化、MPP 架构、CBO、智能物化视图、可实时更新的列式存储引擎等技术实现多维、实时、高并发的数据分析。StarRocks 既支持从各类实时和离线的数据源高效导入数据&#xff0c;也支持直接分析数据湖上各种格式的数…

142. 两个字符串的最小 ASCII 删除总和(卡码网周赛第二十五期(23年B站笔试真题))

题目链接 142. 两个字符串的最小 ASCII 删除总和&#xff08;卡码网周赛第二十五期&#xff08;23年B站笔试真题&#xff09;&#xff09; 题目描述 给定两个字符串 s1 和 s2&#xff08;0 < s1.length, s2.length < 1000&#xff09;&#xff0c;返回使两个字符用相等所…

C++:组合和继承的区别

组合介绍以及与继承对比 什么是组合 (1)composition&#xff0c;组合&#xff0c;就是在一个class内使用其他多个class的对象作为成员 (2)用class tree做案例讲解 (3)组合也是一种代码复用方法&#xff0c;本质也是结构体包含 #include <iostream> #include <vector…

CMakeLists.txt编写思路

近期在linux编写CMakeLists.txt文件&#xff0c;整理了一些思路。 一、编写CMakeLists.txt的基本步骤和思路&#xff1a; 初始化CMake&#xff1a; 使用cmake_minimum_required指令指定CMake的最小版本要求&#xff0c;以确保兼容性。使用project指令定义项目名称和可选的语言…

前端-Cookie篇

文章目录 一、由来什么是Cookie&#xff1f;特点Cookie的类型 二、原理三、Cookie生成机制客户端设置案例 四、属性五、缺陷最后分享一段自己工作中封装的一些关于cookie的公众方法✒️总结 前端Cookie是Web开发中非常重要的一部分&#xff0c;它是服务器发送到用户浏览器并保存…

Mysql索引什么时候会失效

在 MySQL 中&#xff0c;索引是提高查询效率的关键工具&#xff0c;但在某些情况下&#xff0c;索引可能会失效。以下是一些常见的索引失效情况&#xff1a; 使用不等号&#xff08;! 或 <>&#xff09;&#xff1a; 使用不等号会导致索引失效&#xff0c;因为不等号无法…

Python模块ConfigParser读取应用程序的配置文件简单示例

一、模块说明&#xff1a; 系统管理员通常通过文本编辑器编辑这些配置文件&#xff0c;以设置应用程序的默认值&#xff0c;然后应用程序将读取并解析这些配置文件&#xff0c;并根据其中的内容执行对应操作。ConfigParser模块具有read()方法&#xff0c;用于读取配置文件。 …

STM32自己从零开始实操08:STM32主控原理图

由于老师使用的各引脚分门别类的单片机原理图我没有找到&#xff0c;我使用是引脚按顺序摆放的&#xff0c;不方便一个模块一个模块截图展示&#xff0c;所以这部分使用老师的原理图。 一、电源 1.1电源的介绍 1.1.1数字电源和地&#xff08;VDD和VSS&#xff09; 数字电源…

中国各省养老机构数据明细(更新至2024年)

中国养老机构是指为老年人提供集中居住、生活照顾、健康管理、文化娱乐等综合性服务的设施。这些机构包括养老院、福利院、老年公寓等多种形态&#xff0c;既有公立也有民办&#xff0c;遍布城市与农村。 一、数据介绍 数据名称&#xff1a;中国养老机构数据明细 数据范围&am…

[leetcode]minimum-cost-to-reach-destination-in-time 规定时间内到达终点的最小费用

. - 力扣&#xff08;LeetCode&#xff09; class Solution { private:// 极大值static constexpr int INFTY INT_MAX / 2;public:int minCost(int maxTime, vector<vector<int>>& edges, vector<int>& passingFees) {int n passingFees.size();ve…

LinkedList----源码分析

源码介绍 public class LinkedList<E>extends AbstractSequentialList<E>implements List<E>, Deque<E>, Cloneable, java.io.Serializable{} 添加过程中的操作&#xff1a; 当创建LinkedList类时&#xff0c;会调用其空参构造方法&#xff0c;将其参…

ipv4和ipv6的兼容性问题

ipv4和ipv6的兼容 现今大多知名网站都是同时支持ipv6和ipv4&#xff0c;这种可以分为两种情况讨论&#xff1a; 一个IPv4的网络和一个IPv6的网络通信;一个IPv6的网络和一一个IPv6的网络通信&#xff0c;但是中间需要经过一一个IPv4的网络。 先以第一种为例&#xff1a; 若一…

昇思大模型——MindFormers的使用----从零开始安装配置环境

MindSpore Transformers套件的目标是构建一个大模型训练、微调、评估、推理、部署的全流程开发套件&#xff0c;提供业内主流的Transformer类预训练模型和SOTA下游任务应用&#xff0c;涵盖丰富的并行特性。期望帮助用户轻松的实现大模型训练和创新研发。 MindSpore Transform…

LeetCode 算法:实现 Trie (前缀树) c++

原题链接&#x1f517;&#xff1a;实现 Trie (前缀树) 难度&#xff1a;中等⭐️⭐️ 题目 Trie&#xff08;发音类似 “try”&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0…

关于C# 开发Winfrom事后总结

一&#xff1a;要求能读取文件夹中视频及图片并判断 private void Form1_Load(object sender, EventArgs e){string foldPath "路径";//获取该目录下的文件 string[] files Directory.GetFiles(foldPath "\\", "*.*", System.IO.SearchOption…