0

I know that react-router-dom doesn't support usePrompt and useBlock anymore, well I have been trying to figure out if there are any ways to still use this function in "react-router-dom": "^6.2.2" version or making you're own usePrompt and useBlock that will do the same, I have done the prompting function resolved but it only working if I close the browser or refresh it the below code works fine

  const closePrompt = (e: BeforeUnloadEvent) => {
    if (isFieldDisabled) {
      e.preventDefault();
      e.returnValue = '';
    }
  };

  window.addEventListener('beforeunload', closePrompt);

but if the user changes the route to the existing app define route it will redirect it to that page without any prompt or warning to show.

Abbas Hussain
  • 1,277
  • 6
  • 14
  • 1
    Does this answer your question? https://stackoverflow.com/questions/71572678/react-router-v-6-useprompt-typescript It's Typescript but it should be trivial to strip out the typing bits. – Drew Reese Mar 29 '22 at 17:44
  • thanks, mate I'm also a typescript guy finger cross hope the above solution will work! – Abbas Hussain Mar 29 '22 at 17:50
  • Also, AFAIK the `usePrompt` and `useBlocker` code hasn't been completely deprecated. They just didn't include it with the v6 release and plan to bring it back in a future release, though it's unclear when. https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported – Drew Reese Mar 29 '22 at 17:55
  • yeah that i also read somewhere, thanks the above solution works. – Abbas Hussain Mar 29 '22 at 18:03

0 Answers0