如何在LightGallery React（NextJS）中自定义哈希实现指定图片跳转

问题 #

我把LightGallery组件部署在/gallery/id路径下，想实现访问/gallery/id/#3时直接打开第三张图片。官方默认用#lg=1&slide=3这种参数，但我不想用这套格式，能不能只用URL/#3达成需求？我的组件代码如下：

import LightGallery from 'lightgallery/react';
// 省略插件导入...

<LightGallery
    onInit={(details) => {
        onInit(details);
    }}
    speed={800}
    plugins={[
        lgThumbnail,
        lgZoom,
        video,
        fullscreen,
        comment,
        autoplay,
        rotate,
    ]}
    download={false}
    videojs={true}
    fullScreen={true}
    enableThumbSwipe={true}
    animateThumb={true}
    enableThumbDrag={true}
    toggleThumb={true}
    closeOnTap={true}
    enableDrag={true}
    getCaptionFromTitleOrAlt={true}
    mousewheel={true}
    showMaximizeIcon={true}
    showZoomInOutIcons={true}
    mobileSettings={mobileSettingsProp}
    autoplay={true}
    autoplayControls={true}
    progressBar={true}
    rotate={true}
    rotateRight={true}
    elementClassNames={'gallery'}
    zoomFromOrigin={false}
    allowMediaOverlap={true}
>
    {photos}
</LightGallery>

解决方案 #

当然可以，核心思路是禁用官方默认的哈希处理，自己解析URL里的哈希值，再调用LightGallery的API跳转指定图片：

1. 关闭默认哈希路由：给LightGallery组件加hash={false}属性，关掉官方自带的哈希参数逻辑。
2. 解析哈希值并跳转：在onInit回调里，读取当前URL的哈希部分，转成图片索引（注意LightGallery的slide索引从0开始，所以#3对应索引2），然后用实例的slideTo方法跳转，需要的话再调用open自动打开画廊。

修改后的完整代码示例：

import LightGallery from 'lightgallery/react';
// 导入你需要的插件...

const GalleryComponent = ({ photos, mobileSettingsProp }) => {
    const onInit = (details) => {
        // 提取哈希值里的数字
        const hashNum = window.location.hash.replace('#', '');
        const targetIndex = parseInt(hashNum, 10) - 1;
        
        // 验证索引有效性
        if (!isNaN(targetIndex) && targetIndex >= 0 && targetIndex < photos.length) {
            // 跳转到指定图片
            details.instance.slideTo(targetIndex);
            // 自动打开画廊（如果需要的话）
            details.instance.open();
        }
    };

    return (
        <LightGallery
            onInit={onInit}
            speed={800}
            plugins={[
                lgThumbnail,
                lgZoom,
                video,
                fullscreen,
                comment,
                autoplay,
                rotate,
            ]}
            download={false}
            videojs={true}
            fullScreen={true}
            enableThumbSwipe={true}
            animateThumb={true}
            enableThumbDrag={true}
            toggleThumb={true}
            closeOnTap={true}
            enableDrag={true}
            getCaptionFromTitleOrAlt={true}
            mousewheel={true}
            showMaximizeIcon={true}
            showZoomInOutIcons={true}
            mobileSettings={mobileSettingsProp}
            autoplay={true}
            autoplayControls={true}
            progressBar={true}
            rotate={true}
            rotateRight={true}
            elementClassNames={'gallery'}
            zoomFromOrigin={false}
            allowMediaOverlap={true}
            hash={false} // 禁用默认哈希处理
        >
            {photos}
        </LightGallery>
    );
};

export default GalleryComponent;

额外优化 #

如果想让用户修改URL哈希值后自动跳转，可以加个hashchange事件监听：

import { useEffect, useRef } from 'react';

const GalleryComponent = ({ photos, mobileSettingsProp }) => {
    const galleryRef = useRef(null);

    const handleHashChange = () => {
        const hashNum = window.location.hash.replace('#', '');
        const targetIndex = parseInt(hashNum, 10) - 1;
        if (!isNaN(targetIndex) && targetIndex >= 0 && targetIndex < photos.length && galleryRef.current) {
            galleryRef.current.instance.slideTo(targetIndex);
        }
    };

    useEffect(() => {
        window.addEventListener('hashchange', handleHashChange);
        return () => window.removeEventListener('hashchange', handleHashChange);
    }, [photos]);

    const onInit = (details) => {
        galleryRef.current = details;
        handleHashChange();
        // 自动打开画廊（如果需要）
        details.instance.open();
    };

    // 组件其余部分不变...
};

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