React缓存(获取历史路由/堆栈)

已于 2023-02-24 15:25:21 修改
阅读量2.2k 收藏
点赞数 1
文章标签： react.js 前端 Powered by 金山文档
于 2023-02-24 15:17:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ricale/article/details/129199852
版权

今天收到一个bug说是页面详情返回之后页面应该保持原本的数据样子，我一想这不就是keep-live吗

于是乎，去搜React的Keep-Live怎么实现，看到一位大佬封装的组件https://blog.csdn.net/zz130428/article/details/128275281

有点看不懂，后来想到一条思路，判断上一个页面的路由是不是详情页的路由，然后提前把页面的查询条件存储起来，如果进入这个页面时候的上个路由时详情页的，那就拿到存储起来的条件去渲染页面，达到一个缓存的效果。

问题来了，找了半天也没找到怎么拿到上一个页面的路由，知道在这里的评论区看到一位大佬的回复https://www.saoniuhuo.com/question/detail-2390072.html

最低0.47元/天 解锁文章
酱油ooo-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习五（页面路由）
qq_44872688的博客
03-16 2888
文章目录一、前端路由二、hash模式三、history模式四、两种路由方式的差异五、React的页面路由模块：react-router-dom的使用1、安装2、实现路由模式的组件（决定路由模式）3、Route组件4、Router组件5、Link和NavLink组件（1）Link组件（2）NavLink组件6、Redirect组件7、Switch组件8、withRouter组件9、404视图六、react-router-dom实现路由示例 一、前端路由 1、从用户的角度看，前端路由主要实现了两个功能（使用a
前端路由与历史
吴小迪的博客
10-24 1576
在做全栈支持的过程中发现很多后端同学对hashHistory和browserHistory的区别不清楚不理解，也不知道如何正确地配置browserHistory，在本文中我们希望回答大家的这些疑惑: React应用url中的?_k=xxx 是什么? history是什么？为什么我们需要和它打交道? hashHistory和browserHistory有什么区别? 什么情况下使用hashHistory，什么情况下使用browserHistory? 如何在SOFA系统中配置browserHistory? 前
4. react路由
友人A的博客
07-30 628
react路由
react16路由缓存react-activation详解
最新发布
局外人LZ的博客
04-02 1512
React 路由缓存是指在使用 React Router 或其他路由管理库时，通过一些技术手段来缓存已经加载的页面组件，以便在用户再次访问这些页面时能够更快地呈现内容，提升用户体验和性能。
React Router缓存路由
qq_42996469的博客
04-25 5927
本篇算是读书笔记，书是《深入理解React Router：从原理到实践》 以下代码实现基于react-router5 在React Router中，一般情况下原生Route所负责渲染的组件在命中路由时进行挂载，而在导航时离开，路由未命中时组件将被销毁，分别对应了组件的componentDidMount与componentWillUnmount生命周期。 如果想在导航后页面得到缓存呢？在Vue或Angular中，有对应的keep-alive与路由复用策略可以实现页面缓存，React Router没有提供。一般
【react】spa应用中获取上一页路径
qq_33539213的博客
11-23 4598
场景： spa应用需要添加埋点，参数需要获取当前页面的上一页url。 相关技术栈：react + react-router 常规场景可以通过document.referrer拿到，但spa应用中切换路由document.referrer不会改变。 查看了react-router和history的API，都没有提供监听路由变化的函数。因此采取的方案是，添加一个生命周期钩子，在location.pathname改变时，将旧的url保存在全局变量中。 // util.js export const setR.
react缓存页面
大灰狼的小绵羊哥哥的博客
03-01 7307
一 一切根源都从产品小姐姐无厘头需求开始 最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。 场景一： 如上图所示，当在数万级别的数据中，选择一条，点击查看，跳转到当前数据的详情页，当点击按钮返回返回来，或者是浏览器前进后退等其他操作，返回到列表页的时候。要记录当前列表的位置。也就是要还原点击查看查看前的页面。但是当点击tab菜单按钮的时候，要清除页面信息。 场景二： 如上图所示，当我们编辑内容的时候，一些数据可能从其他页面获得，所以要求，无
react——路由
m0_55173487的博客
02-03 5606
前端路由就是把不同路由对应不同的内容或页面对应展示出来。路由可以帮助我们很好的管理页面和代码，增强用户的体验感。路由模式有hash和 history 两种模式，通常用hash模式。在react中，react-router是跨平台的，内置通用组件和通用Hooks。
react 实现页面状态缓存（keep-alive）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
01-22 6329
因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。
详解react如何在组件中获取路由参数
12-29
路由参数 假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from '...
react非路由跳转组件获取上下文
01-08
react非路由跳转组件获取上下文react非路由跳转组件获取上下文解决方案1.通过路由跳转2.通过属性传递3.通过withRouter包装 react非路由跳转组件获取上下文解决方案 在react组件中，不是所有组件会通过路由跳转，也...
React-router4路由监听的实现
12-09
React-router 4 React Router4是一个纯React重写的包，...在react中，例如：在父路由中有两个子路由，两个子路由组件的内容都属于父路由中的一部分，通过切换子路由来显示不同内容，这种情况下，父组件中的生命周期
在 React Native 上的音频/视频聊天期间处理媒体路由/传感器/事件_Java_代码_相关文件Objective-C
07-14
在 React Native 上的音频/视频聊天期间处理媒体路由/传感器/事件 目的： 此模块的目的是处理电话（音频/视频）期间的操作/事件react-native，例如： 管理设备事件，如有线耳机插入状态、接近传感器并将功能公开给...
React中的路由基础知识（一级路由），5版本的！！！
weixin_48952990的博客
08-27 762
React中的路由基础知识（一级路由），5版本的！！！
React Router 路由
知识点沉淀包括不限于前端
04-05 333
路由 import {HashRouter,Route,Switch,Link} from “react-router-dom”; Route: 有个path；其属性值对应页面的hash值； 当页面的hash值和这个path属性的属性值匹配成功就会显示对应的组件， component:该path对应的组件exact: 如果给该条路由加上exact这个属性值为true，当前页面的hash值必须和p...
react umi 页面缓存
ll_883963的博客
06-06 1032
【代码】react umi 页面缓存。
react中点击按钮返回上一级路由页面
qq_45757927的博客
08-09 1439
网上包括在csdn搜索了如题内容，出现的答案大多都是以下代码，使用useHistory钩子。
React中实现keepalive组件缓存效果
coder__wang的博客
01-13 4042
由于react官方并没有提供缓存组件相关的api（类似vue中的keepalive），在某些场景，会使得页面交互性变的很差...封装keepalive缓存组件，实现组件的缓存，并暴露相关方法，可以手动清除缓存
React路由
mantou_riji的博客
11-30 5750
多页面应用是指每切换一个页面就是一个真正的html页面。 单页面应用是指整个应用只有一个完整的页面，点击页面中的链接不会刷新页面只会局部更新，并且数据都需要通过ajax请求获取，并在前端异步展示。单页面，多组件。 路由匹配的是只是端口号后面的内容（/about、/history）。那么是如何实现一点击导航栏的选项浏览器地址栏中的路径就改变呢， 这就需要借助history实现。 浏览器的BOM身上有一个history，用于管理浏览器的路径、历史记录等。 但是BOM原生的history不好操作我们一般用一个封装
react 获取路由跳转历史记录
05-28
在 React 中，您可以使用 `useHistory` 钩子来访问路由跳转历史记录。`useHistory` 钩子能够让您访问 Router 组件的 history 对象，该对象用于管理浏览器历史记录。 以下是一个示例代码，展示了如何使用 `useHistory` 钩子来获取路由跳转历史记录： ```javascript import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); function goBack() { history.goBack(); } function goForward() { history.goForward(); } function goToRoute() { history.push('/my-route'); } return ( <div> <button onClick={goBack}>后退</button> <button onClick={goForward}>前进</button> <button onClick={goToRoute}>跳转到路由</button> </div> ); } ``` 在上面的代码中，我们使用 `useHistory` 钩子来获取 `history` 对象，并使用它的 `goBack` 和 `goForward` 方法来后退和前进浏览器历史记录。我们还使用 `push` 方法将用户导航到新的路由。 注意，`useHistory` 钩子只能在 `Router` 组件内部使用。如果您的组件不是 `Router` 的子组件，则需要使用其他方式来获取 `history` 对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值