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

酱油ooo-

已于 2023-02-24 15:25:21 修改

阅读量2.6k

点赞数 1

文章标签： react.js 前端

于 2023-02-24 15:17:49 首次发布

本文链接：https://blog.youkuaiyun.com/Ricale/article/details/129199852

版权

在React应用中，为实现页面返回后保持原有数据，本文介绍了如何利用路由历史记录来模拟Keep-Live效果。通过存储详情页的查询条件，并在重新进入时恢复这些条件，达到页面缓存的目的。在寻找解决方案的过程中，提及了从评论区获取的获取上一页面路由的方法，并尝试了自定义历史堆栈，最终选择在Layout组件中监听路由变化，并通过context传递，使子组件能够根据路由变化做出响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

是我无知了！

然后，找了一个自定义保存历史堆栈的例子，我，行不通，也有点看不懂。

我心想，算了，我自己写吧，想了一通是这么实现的

首先layout组件里监听路由变化

const [pathHistory, setPathHistory] = useState([]);
const { pathname } = useLocation();
  useEffect(() => {
    pathHistory.unshift(pathname);
}, [pathname]);