In a React project, I've created a popup modal which will be displayed when any user tries to do any changes in input field and navigate to other screen. It doesn't work as expected, hence gone through many posts to find the solution but, no luck. Please refer to code below:

useBlock.js

import {useContext, useEffect} from 'react';
import { UNSAFE_NavigationContext as NavigationContext} from 'react-router-dom';
const useBlocker = (blocker, when = true) => {
    const navigator = useContext(NavigationContext).navigator
    useEffect(() => {
        if (!when)
            return;
        const unblock = navigator.block((tx) => { <-- This line is creating an issue
            const autoUnblockingTx = {
                ...tx,
                retry() {
                  unblock();
                  tx.retry();
                },
              };
            blocker(autoUnblockingTx);
        });
        return unblock;
    }, [navigator, blocker, when]);
}

export default useBlocker

useCallbackPrompt.js

import { useCallback, useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router';
import useBlocker from './useBlocker';

const useCallbackPrompt = (when) => {
    const navigate = useNavigate();
    const location = useLocation();
    const [showPrompt, setShowPrompt] = useState(false);
    const [lastLocation, setLastLocation] = useState(null);
    const [confirmedNavigation, setConfirmedNavigation] = useState(false);
    const cancelNavigation = useCallback(() => {
        setShowPrompt(false);
    }, []);

    const handleBlockedNavigation = useCallback((nextLocation) => {
        if (!confirmedNavigation &&
            nextLocation.location.pathname !== location.pathname) {
            setShowPrompt(true);
            setLastLocation(nextLocation);
            return false;
        }
        return true;
    }, [confirmedNavigation]);
    
    const confirmNavigation = useCallback(() => {
        setShowPrompt(false);
        setConfirmedNavigation(true);
    }, []);
    useEffect(() => {
        if (confirmedNavigation && lastLocation) {
            navigate(lastLocation.location.pathname);
        }
    }, [confirmedNavigation, lastLocation]);
    useBlocker(handleBlockedNavigation, when);
    return [showPrompt, confirmNavigation, cancelNavigation];
}

export default useCallbackPrompt

So above are the 2 files which I'm using. In useBlocker.js file that particular line is actually causing the root issue. Please refer to the image below

I'm using "react-router-dom": "^6.3.0", Is this causing any issue? Any suggestions or modifications are highly appreciated.

CodePudding user response：

I wasn't able to reproduce the issue using [email protected], but I could when bumping to [email protected]. I suspect with a dependency specified as ^6.3.0 you've actually a more current version actually installed. If you like you can check the installed version by running npm list react-router-dom and verify for yourself.

It seems the navigation context has a mildly breaking change between v6.3.0 and v6.4.0. The v6.3.0 version is a history object (

CodePudding user response：

From v6.4.0 navigator.block is removed. You can find a workaround here: https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355.

Also, relevant discussion going on here. https://github.com/remix-run/react-router/issues/8139#issuecomment-1262630360