A component to override the Next.js 13+ Link App Router component to block internal changes based on a URL parameter.

link-with-before-unload.tsx

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import type { ComponentProps, MouseEvent } from "react";

type Props = ComponentProps<typeof Link> & {
  message?: string;
};

const LinkWithBeforeUnload = (props: Props) => {
  const searchParams = useSearchParams();
  const hasUnsavedChanges = searchParams.get("hasUnsavedChanges") === "true";

  const onClick = (e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>) => {
    if (!hasUnsavedChanges) {
      return;
    }
    const shouldContinue = window.confirm(
      props.message ??
         "You have unsaved changes, are you sure you want to leave this page?"
    );

    if (!shouldContinue) {
      e.preventDefault();
      return;
    }
  };

  return (
    <Link {...props} onClick={onClick}>
      {props.children}
    </Link>
  );
};

export default LinkWithBeforeUnload;