React Photoswipe Gallery在Next.js中浏览器历史记录冗余问题求助

问题背景 #

在Next.js项目中使用react-photoswipe-gallery（基于Photoswipe 5.2.8），画廊主页跳转至子页面后，点击子页面的缩略图可打开Photoswipe灯箱。切换图片时URL会追加图片ID参数（如http://localhost/pictures/gallery1#&gid=photo-gallery&pid=1），关闭灯箱后URL会恢复为页面基础路径，但所有带pid参数的URL都被存入了浏览器历史记录，导致点击返回按钮需要多次操作才能回到画廊主页。而纯JS版本的Photoswipe无此问题，关闭灯箱后点击返回可直接回到主页，且不会留存带pid的历史记录。已知Photoswipe v5已移除History API，推测是配置问题，但原有的ignore history选项已不存在。

解决方案 #

方案1：通过Photoswipe配置禁用历史记录更新 #

Photoswipe v5仍保留了history配置项，可直接在Gallery的options中设置history: false，禁用hash更新的历史记录写入。

方案2：监听灯箱关闭事件，手动清理历史记录 #

如果方案1不生效，可通过onClose回调监听灯箱关闭事件，使用history.replaceState替换当前历史条目，移除带pid的hash参数。

修改后的代码示例 #

import "photoswipe/dist/photoswipe.css";
import { Gallery, Item } from "react-photoswipe-gallery";

export default function picGallery(props: Object) {
  const data = Array.from(Object.values(props));
  
  const handleGalleryClose = () => {
    // 移除URL中的pid相关hash参数，替换当前历史记录
    if (window.location.hash.includes('pid=')) {
      window.history.replaceState(null, '', window.location.pathname);
    }
  };

  return (
    <div className="max-w-6xl grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-8 text-base">
      <Gallery
        withCaption
        id="photo-gallery"
        options={{
          bgOpacity: 1,
          padding: { top: 20, bottom: 50, left: 20, right: 20 },
          // 禁用Photoswipe的历史记录功能
          history: false
        }}
        onClose={handleGalleryClose}
      >
        {data.map(
          (pic: {
            id: number;
            title: string;
            description: string;
            smallImage: string;
            bigImage: string;
            width: number;
            height: number;
          }) => (
            <figure key={pic.id} className="cursor-pointer">
              <Item
                id={pic.id}
                original={pic.bigImage}
                thumbnail={pic.smallImage}
                width={pic.width}
                height={pic.height}
                alt={pic.title}
              >
                {({ ref, open }) => (
                  <a
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      open(e);
                    }}
                    ref={ref as React.MutableRefObject<HTMLAnchorElement>}
                  >
                    <img onClick={open} src={pic.smallImage} alt={pic.title} />
                  </a>
                )}
              </Item>
              <figcaption className="pt-2">{pic.title}</figcaption>
            </figure>
          )
        )}
      </Gallery>
    </div>
  );
}

说明 #

• history: false配置会直接阻止Photoswipe写入带pid的历史记录，是最直接的解决方案。
• handleGalleryClose回调作为兜底方案，确保即使配置不生效，也能在灯箱关闭时清理当前历史条目，避免冗余的历史记录堆积。

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