How to use custom hashes in LightGallery React (NextJS)

Question

I have LightGallery on the URL /gallery/id, where I have opened the gallery yet. But I want to have my gallery so that if I press /gallery/id/#3, I open the third photo in the row. I found it in the documentation from LightGallery (https://www.lightgalleryjs.com/demos/hash/), but they are linking the gallery with parameters #lg=1&slide=3 for example. But I don´t want to link with their parameters lg or slide. Is there any way to do it with only URL/#3?

My component in return function:

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>

Answer 1

You can server side render the page using useRoute to catch id and slide in the route

  const router = useRouter();
  const { id, slide } = router.query;

And your file name will like this.

pages/gallery/[id]/[slide].jsx