如何监听浏览器返回按钮并重置React路由关联的Boolean状态？

问题背景 #

子路由在父路由（Feed.jsx）内通过Outlet渲染，使用renderChildren布尔状态控制子路由容器的left-0/left-full类，实现从左侧滑入的过渡效果。已修复手动刷新pin-details子路由时父状态为null导致的渲染异常，但点击移动端应用栏自定义返回按钮（非浏览器原生返回）时，renderChildren仍保持true，浏览器导航至上一页后页面无法正常显示。计划通过监听浏览器返回事件重置状态，需确认方案可行性及实现方式。

方案可行性分析 #

该方案完全可行：浏览器的popstate事件会在用户触发浏览器返回/前进操作、或通过代码调用history.back()/history.forward()时触发，可借此同步路由变化与组件状态。同时结合React Router的路由监听，能覆盖自定义返回按钮的场景，确保状态与路由始终一致。

具体实现步骤 #

1. 结合路由监听与popstate事件处理 #

在Feed.jsx中，通过useLocation监听路由变化，同时绑定popstate事件，在路由离开子路由或触发浏览器返回时重置renderChildren状态：

import { useState, useEffect } from 'react';
import { Outlet, useLocation } from 'react-router-dom';

const Feed = () => {
  const [renderChildren, setRenderChildren] = useState(false);
  const location = useLocation();

  useEffect(() => {
    // 路由离开pin-details页面时，自动重置状态
    if (!location.pathname.includes('/pin-details')) {
      setRenderChildren(false);
    }

    // 监听浏览器popstate事件（原生返回/前进触发）
    const handlePopState = () => {
      setRenderChildren(false);
    };
    window.addEventListener('popstate', handlePopState);

    // 组件卸载时清理事件监听器，避免内存泄漏
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [location.pathname]);

  // 原有渲染逻辑
  return (
    <>
      {/* Pin布局 */}
      <section>
        {feed_data.map((item, index) => (
          <Pins key={index} pin={item} setRenderChildren={setRenderChildren} />
        ))}
      </section>

      {/* 子路由容器 */}
      <section
        className={`${renderChildren ? "left-0" : "left-full"} fixed top-0 bg-white w-full z-30 transition-all h-full overflow-y-auto`}
      >
        <Outlet context={[renderChildren, setRenderChildren]} />
      </section>
    </>
  );
};

export default Feed;

2. 自定义返回按钮同步状态 #

在PinDetails.jsx的自定义返回按钮中，先重置renderChildren状态，再执行跳转（可选添加过渡延迟，匹配动画时长提升体验）：

import { useNavigate, useOutletContext } from 'react-router-dom';

const PinDetails = () => {
  const navigate = useNavigate();
  const [, setRenderChildren] = useOutletContext();

  const handleBack = () => {
    // 先关闭子路由容器
    setRenderChildren(false);
    // 等待过渡动画结束后跳转（假设transition时长为300ms）
    setTimeout(() => {
      navigate(-1);
    }, 300);
  };

  return (
    <div>
      {/* 自定义返回按钮 */}
      <button onClick={handleBack}>返回</button>
      {/* 子路由内容 */}
    </div>
  );
};

export default PinDetails;

效果说明 #

• 点击浏览器原生返回按钮：popstate事件触发，renderChildren设为false，子路由容器滑出，页面正常显示上一页内容。
• 点击自定义返回按钮：先触发状态变更滑出子路由容器，延迟后导航至上一页，状态与路由同步。
• 路由跳转（如通过其他链接离开子路由）：useLocation监听路径变化，自动重置状态，避免状态残留。

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