初学create-react-app

最新推荐文章于 2023-11-22 21:50:28 发布

「已注销」

最新推荐文章于 2023-11-22 21:50:28 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jane1229/article/details/81611880

本文介绍如何解决React应用中跳转至外部链接后返回时页面与服务器断开连接的问题，并通过localStorage实现数据自动记录。

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

根据官方文档创建自己的项目
create-react-app github地址：https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

学习过程中遇到的问题
1. 其实本人需求：
  1. 满足某条件后跳转到外部其他网站链接
  2. 点击提交，再次返回或刷新初始页面时，自动记录前一次数据
2. 遇到的问题：
  1. 跳转到外部链接后back，界面与服务器断开链接(The development server has disconnected.)，需要手工刷新界面才可使用，操作比较烦搜，属于bug
  2. 问题1导致的无法展示记录到数据

解决办法

问题1:

const detectBack = {
    initialize: function () {
        //监听hashchange事件
    window.addEventListener('hashchange',       function () {
            //为当前导航页附加一个tag
    this.history.replaceState('hasHash', '', '');
        }, false);

    window.addEventListener('popstate', function (e) {
            if (e.state) {
                //侦测是用户触发的后退操作, dosomething
                //这里刷新当前url
               this.location.reload();
            }
        }, false);
    }
};
detectBack.initialize();