Hi i wanted to make a functionality where before the page change you take a thumbnail of the mindmap

const Thumbnail = (props: { refHtml: any; mindMapId: string }) => {
  let [isPending, startTransition] = useTransition();
  const { getNodes } = useReactFlow();
  const onClick = () => {
    const nodesBounds = getRectOfNodes(getNodes());
    const transform = getTransformForBounds(
      nodesBounds,
      imageWidth,
      imageHeight,
      0.5,
      2,
    );

    toPng(props.refHtml.current, {
      width: imageWidth,
      height: imageHeight,
    }).then((data: string) => {
      startTransition(() => sendToCloudinary(data, props.mindMapId));
    });
  };

  return (
    <Panel position="top-right">
      <button onClick={onClick}>screenshot</button>
    </Panel>
  );
};

export default Thumbnail;

`

but i use a button to make it works because router.events no longer works in nextjs 13.4

i tried to replace with the event beforeunload but it only work with a reload of pages
not a route change


ive tried to replace with an hook like

function useNavigationEvent() {
   const pathname = usePathname()
   useEffect(() => {
        console.log('before route change')
     }, [pathname])
}

but its being trigger when i am on the new route not before the route is changed


if you have any idea let me know

ps: sorry if its not understandable i am not fluent in english