如何在浏览器返回按钮点击时分发RTK Action？

你的代码无法响应浏览器返回按钮，核心问题是**navigate.action仅能捕获React Router内部触发的导航动作**，直接点击浏览器原生返回按钮时，这个属性不会更新，导致useEffect里的判断逻辑无法执行。

修复方案 #

改用监听浏览器原生的popstate事件，这个事件会在用户点击返回/前进按钮时触发。同时调整useEffect的依赖和逻辑，确保事件监听正确挂载与清理：

function Beginning() {
  const [count, setCount] = useState(3);
  const [message, setMessage] = useState("");
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleCount = () => {
    if (count === 1) {
      return setMessage("GO");
    }
    return setCount(count - 1);
  };

  useEffect(() => {
    // 监听浏览器返回按钮事件
    const handlePopState = () => {
      dispatch(restart());
    };
    window.addEventListener('popstate', handlePopState);

    // 倒计时逻辑
    const interval = setInterval(() => {
      handleCount();
    }, 1000);
    
    if (message === "GO") {
      setTimeout(() => {
        dispatch(start());
      }, 1000);
    }

    // 清理函数：移除事件监听+清除定时器
    return () => {
      window.removeEventListener('popstate', handlePopState);
      clearInterval(interval);
    };
  }, [count, message, dispatch]); // 移除navigate.action依赖，添加dispatch

  return (
    <>
      <div>
        <h3>GET READY...</h3>
        <h1>{count}</h1>
        <h1>{message}</h1>
      </div>
    </>
  );
}

export default Beginning;

关键修改点 #

1. 添加popstate事件监听：直接监听浏览器的原生事件，确保捕获返回按钮动作。
2. 清理事件监听器：在组件卸载时移除监听，避免内存泄漏。
3. 调整useEffect依赖：移除navigate.action，添加dispatch（Redux的dispatch是稳定引用，不会触发不必要重渲染）。

另外补充：如果你的路由配置中，返回时该组件会被卸载再重新挂载，也可以在组件挂载时通过useLocation获取location.action，判断是否为'POP'来分发action，但监听popstate是更直接适配原生返回按钮的方式。

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli