umi路由跳转问题，监控

最新推荐文章于 2024-05-09 13:45:57 发布

原创最新推荐文章于 2024-05-09 13:45:57 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #react.js

本文探讨了在umi前端框架中遇到的路由跳转问题，特别是如何在跳转时保持页面缓存，并在返回时恢复筛选条件和页码。解决方案包括使用hooks监听props.history.location变化以及利用Umi的history.block和Prompt API实现页面离开提醒。

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

umi路由跳转问题

描述一下问题，有一个需求就是要记录页面缓存，跳到其他页面的时候，当通过goBack、或者是history.go(-1)返回的时候，保存当前页面的筛选条件，以及页码。
或者要离开当前页面的时候，需要做一下提醒。

解决方式

hooks，监听当前页面的props.history.location变化

useEffect(() => {
    if (props.history.location.pathname === '/O2OBusinessManger' && props.history.location.action === 'POP') {
          console.log('执行');
        }
  }, [props.history.location]);

Umi history.block 的实现

history.block((location, action) => {
    if (location.pathname === '/O2OBusinessManger' && action === 'POP') {
      console.log('提示');
    }
  })

参考：history.block

Umi API Prompt (当页面离开提示)

import { Prompt } from 'umi';

export default () => {
  return (
    <div>
      <Prompt message="你确定要离开么？" />
    </div>
  );
};

写一篇有用的文章不容易欢迎打赏与讨论
在这里插入图片描述