The hooks @gdh mentioned in his answer were removed by the developers team of react-router. Because of that you can't use usePrompt or useBlocker with the current version of react-router (v6).

But the team mentioned they are heavily working on the features. reference

If somebody wants to implement the changes the remix team made to offer the functionalities of the hooks you can take a look at this answer from github. here

I was facing the same situation of attempting to utilize a customized "pleasant" UI confirmation dialog integrating with react router v6 beta's useBlocker hook for blocking route transitions when the current route's form has unsaved modifications. I started with the code from the codesandbox linked in the UPDATED section at the bottom of this question. I found this custom hook implementation to not work for all of my needs, so I adapted it to support an optional regular expression parameter to define a set of routes that should not be blocked. Also of note, the codesandbox implementation returns a boolean from the callback passed into useBlocker, but I found this has no effect or usefulness, so I removed this. Here is my full TypeScript implementation of a revised custom hook:

useNavigationWarning.ts

import { useState, useEffect, useCallback } from 'react';
import { useBlocker, useNavigate, useLocation } from 'react-router-dom';
import { Blocker } from 'history';

export function useNavigationWarning(
  when: boolean,
  exceptPathsMatching?: RegExp
) {
  const navigate = useNavigate();
  const location = useLocation();
  const [showPrompt, setShowPrompt] = useState<boolean>(false);
  const [lastLocation, setLastLocation] = useState<any>(null);
  const [confirmedNavigation, setConfirmedNavigation] = useState<boolean>(
    false
  );

  const cancelNavigation = useCallback(() => {
    setShowPrompt(false);
  }, []);

  const handleBlockedNavigation = useCallback<Blocker>(
    nextLocation => {
      const shouldIgnorePathChange = exceptPathsMatching?.test(
        nextLocation.location.pathname
      );
      if (
        !(confirmedNavigation || shouldIgnorePathChange) &&
        nextLocation.location.pathname !== location.pathname
      ) {
        setShowPrompt(true);
        setLastLocation(nextLocation);
      } else if (shouldIgnorePathChange) {
        // to cancel blocking based on the route we need to retry the nextLocation
        nextLocation.retry();
      }
    },
    [confirmedNavigation, location.pathname, exceptPathsMatching]
  );

  const confirmNavigation = useCallback(() => {
    setShowPrompt(false);
    setConfirmedNavigation(true);
  }, []);

  useEffect(() => {
    if (confirmedNavigation && lastLocation?.location) {
      navigate(lastLocation.location.pathname);
      // Reset hook state
      setConfirmedNavigation(false);
      setLastLocation(null);
    }
  }, [confirmedNavigation, lastLocation, navigate]);

  useBlocker(handleBlockedNavigation, when);

  return [showPrompt, confirmNavigation, cancelNavigation] as const;
}

@Devb your question and update were super helpful and saved me a lot of time. Thank you! created a HOC based on your code. might be useful to someone. props on Wrapped Component:

• setPreventNavigation - sets when to block navigation

• provideLeaveHandler - sets the function that will run when you try to change a route and you are blocked for navigation

• confirmNavigation - continue navigation

• cancelNavigation - stop Navigation

   import React, { useEffect, useState, useCallback } from 'react'
   import { useNavigate, useBlocker, useLocation } from 'react-router-dom'
  
   export default function withPreventNavigation(WrappedComponent) {
     return function preventNavigation(props) {
       const navigate = useNavigate()
       const location = useLocation()
       const [lastLocation, setLastLocation] = useState(null)
       const [confirmedNavigation, setConfirmedNavigation] = useState(false)
       const [shouldBlock, setShouldBlock] = useState(false)
  
      let handleLeave = null
  
       const cancelNavigation = useCallback(() => {
         setshouldBlock(false)
       },[])
  
       const handleBlockedNavigation = useCallback(
         nextLocation => {
           if (
             !confirmedNavigation &&
             nextLocation.location.pathname !== location.pathname
           ) {
             handleLeave(nextLocation)
             setLastLocation(nextLocation)
             return false
           }
           return true
         },
         [confirmedNavigation]
       )
  
       const confirmNavigation = useCallback(() => {
         setConfirmedNavigation(true)
       }, [])
  
       useEffect(() => {
         if (confirmedNavigation && lastLocation) {
           navigate(lastLocation.location.pathname)
         }
       }, [confirmedNavigation, lastLocation])
  
       const provideLeaveHandler = handler => {
         handleLeave = handler
       }
  
       useBlocker(handleBlockedNavigation, shouldBlock)
  
       return (
         <WrappedComponent
           {...props}
           provideLeaveHandler={provideLeaveHandler}
           setPreventNavigation={setShouldBlock}
           confirmNavigation={confirmNavigation}
           cancelNavigation={cancelNavigation} />
       )
     }
   }
  

It seems you are looking for the beforeunload event.

Read carefully as not all browsers are compliant with event.preventDefault().

In the event handler you can do the checks you want and call prevent the window to close depending on your requirements.

Hope this helps.

This answer uses router v6.

1. You can use usePrompt.

• usePrompt will show the confirm modal/popup when you go to another route i.e. on mount.
• A generic alert with message when you try to close the browser. It handles beforeunload internally

usePrompt("Hello from usePrompt -- Are you sure you want to leave?", isBlocking);

2. You can use useBlocker

• useBlocker will simply block user when attempting to navigating away i.e. on unmount
• A generic alert with message when you try to close the browser. It handles beforeunload internally

useBlocker(
    () => "Hello from useBlocker -- are you sure you want to leave?",
    isBlocking
  );

Demo for both 1 & 2

3. You can also use beforeunload. But you have to do your own logic. See an example here

Posting this for someone who wants custom UI pop-up/modal box instead for browser's default prompt and they are using react-router (v4) with history.

You can make use of custom history and configure your router like

import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()

... 
import { history } from 'path/to/history';

<Router history={history}>
  <App/>
</Router>

and then in your custom prompt component you can make use of history.block like

import { history } from 'path/to/history';

class MyCustomPrompt extends React.Component {
   componentDidMount() {
      this.unblock = history.block(targetLocation => {
           // take your action here     
           return false;
      });
   }
   componentWillUnmount() {
      this.unblock();
   }
   render() {
      //component render here
   }
}

Add this MyCustomPrompt in your components where ever you want to block navigation.