I want to pop up a warning box when the page jumps, but because nextjs uses client-side routing, the beforeunload event will not be triggered.
this is my code:

    useEffect(() => {
        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            if (isModified()) {
                event.preventDefault();
                return;
            }
        };

        window.addEventListener('beforeunload', handleBeforeUnload);
        window.onbeforeunload = handleBeforeUnload;

        return () => {
            window.removeEventListener('beforeunload', handleBeforeUnload);
        };
    }, [somedep...])