H5navigateTo跳转页面返回后 点击浏览器前进按钮 页面被卸载

[tomtiao]

相关平台

H5

复现仓库

https://github.com/tomtiao/taro-h5-router-forward-back.git
浏览器版本: Chrome 114, Firefox 115
使用框架: React

复现步骤

1. yarn install
2. yarn dev:h5
3. 点击首页的Go to Content
4. 进入Content后，点击Go back或浏览器返回按钮
5. 返回首页后，点击浏览器前进按钮，回到Content
6. 再次点击Go back或浏览器返回按钮

期望结果

不卸载首页
首页Count保留状态

实际结果

在第5步前进后，首页被卸载
第6步返回后首页Count还原为0，useLoad钩子再次触发打印Page loaded.

环境信息

👽 Taro v3.6.8


  Taro CLI 3.6.8 environment info:
    System:
      OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
      Shell: 5.8.1 - /usr/bin/zsh
    Binaries:
      Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
      Yarn: 1.22.19 - /mnt/c/Program Files/nodejs/yarn
      npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.8 => 3.6.8 
      @tarojs/components: 3.6.8 => 3.6.8 
      @tarojs/helper: 3.6.8 => 3.6.8 
      @tarojs/plugin-framework-react: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-alipay: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-h5: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-jd: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-qq: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-swan: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-tt: 3.6.8 => 3.6.8 
      @tarojs/plugin-platform-weapp: 3.6.8 => 3.6.8 
      @tarojs/react: 3.6.8 => 3.6.8 
      @tarojs/runtime: 3.6.8 => 3.6.8 
      @tarojs/shared: 3.6.8 => 3.6.8 
      @tarojs/taro: 3.6.8 => 3.6.8 
      @tarojs/taro-loader: 3.6.8 => 3.6.8 
      @tarojs/webpack5-runner: 3.6.8 => 3.6.8 
      babel-preset-taro: 3.6.8 => 3.6.8 
      eslint-config-taro: 3.6.8 => 3.6.8 
      react: ^18.0.0 => 18.2.0 

---

补充信息

没有细看，不过在点击浏览器前进按钮时，似乎unload方法会直接将栈顶元素弹出

[ZakaryCode]

在第5步前进后，首页被卸载
第6步返回后首页Count还原为0，useLoad钩子再次触发打印Page loaded.

因为浏览器在点击前进时会触发 POP 事件，路由会判断为后退

不卸载首页
首页Count保留状态

该情况只能规避，浏览器限制