使用window.location.href跳转后，浏览器回退无法初始化useState状态

1. 监听pageshow事件强制重置状态 #

浏览器的pageshow事件会在页面加载（包括从缓存恢复）时触发，可通过该事件手动重置组件状态：

import { useState, useEffect } from 'react';

function TargetComponent() {
  const [pageState, setPageState] = useState(/* 你的初始状态值 */);

  useEffect(() => {
    const resetStateOnPageShow = () => {
      // 重置所有需要初始化的状态
      setPageState(/* 初始状态值 */);
      // 若有其他state，在此一并重置
    };

    window.addEventListener('pageshow', resetStateOnPageShow);
    return () => window.removeEventListener('pageshow', resetStateOnPageShow);
  }, []);

  // 按钮点击逻辑：发起请求+跳转
  const handleButtonClick = () => {
    fetch('你的接口地址', {
      method: 'POST',
      // 配置请求头、请求体等参数
    }).catch(err => console.error('请求失败:', err));
    
    window.location.href = '外部跳转地址';
  };

  return <button onClick={handleButtonClick}>跳转并发起请求</button>;
}

2. 禁用页面往返缓存（BFcache） #

如果不需要浏览器缓存页面，可通过设置响应头或meta标签禁止BFcache，让返回时页面重新加载：

前端meta标签方式 #

在HTML的<head>中添加：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

后端响应头方式 #

在返回页面的HTTP响应中设置：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

页面重新加载后会重新执行组件初始化逻辑，state自然恢复初始值。

3. 监听popstate事件处理返回操作 #

用户点击浏览器返回按钮时会触发popstate事件，可在此事件中重置状态：

useEffect(() => {
  const resetStateOnBack = () => {
    setPageState(/* 初始状态值 */);
  };

  window.addEventListener('popstate', resetStateOnBack);
  return () => window.removeEventListener('popstate', resetStateOnBack);
}, []);

注意：若页面从BFcache恢复，popstate可能不会触发，建议和pageshow事件配合使用。

补充说明 #

• onbeforeunload主要用于离开页面时的提示，对返回后的状态重置无直接帮助；Redux内存状态在页面从缓存恢复时不会自动清空，需手动在页面恢复时重置Redux状态。
• 优先推荐pageshow事件方案，它直接对应页面从缓存恢复的场景，兼容性较好。

内容的提问来源于stack exchange，提问作者priya