h5实现列表页点击进入详情页，返回时还停留在列表页之前的位置不刷新

h5实现列表页点击进入详情页，返回时还停留在列表页之前的位置不刷新

1. 详情页作为一个组件的形式，引入列表页。
2. 列表页卡片点击的时候，推入一个假的history

     // 推入新的历史状态，实现假的"路由跳转"效果
     window.history.pushState({ from: 'detail' }, '', window.location.href);

4. 监听浏览器返回按钮

   
  // 监听浏览器返回事件，实现假的"路由跳转"效果
  useEffect(() => {
    const handlePopState = (event: PopStateEvent) => {
      // 如果弹窗是打开的，则关闭弹窗
      if (selected) {
        console.log('检测到返回操作，关闭用户详情弹窗');
        setSelected(null);
        // 阻止默认的返回行为，保持当前页面状态
        event.preventDefault();
        // 重新推入当前状态，确保URL不变
        window.history.replaceState(null, '', location.pathname + location.search);
      }
    };

    // 监听 popstate 事件
    window.addEventListener('popstate', handlePopState);

    // 清理事件监听器
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [selected]);//显示详情页时，需要监听的值