Page Leave Confirmation using React

Question

I'm currently working on a project where I want to show a custom Dialogue box with my Own Content ("Save your data into drafts before leaving"). I have tried different methods but can't find a proper way to do it. I explore all the previous questions on StackOverflow but they didn't work properly in my case.

useEffect(() => {
  return () => {
      window.onbeforeunload = function() {
      return "do you want save your data into drafts before leave?";
    };
  }
},[])

Currently, I've written the above code in Plain JavaScript to do, but it's just showing the dialogue box on tab close and reload while not showing on custom click events to navigate to other pages or window back button.

React can't help me in this because they remove useBlocker, usePrompt from new releases. How can I achieve it?

Are you using `react-router`? If so, you can use `history.block` https://github.com/remix-run/history/blob/main/docs/blocking-transitions.md — Son Nguyen, Jun 07 '22 at 11:21
Does this help answer your question? https://stackoverflow.com/a/68933242/8690857 — Drew Reese, Jun 07 '22 at 15:57
@ThanhSonNguyen as I'm using the version "react-router-dom": "^6.2.1", it didn't have usehistory hook anymore .... it always gives the error "module not found in react-routr-dom" — Maher Naveed, Jun 08 '22 at 02:04
@DrewReese it's just showing the confirmation on tab close or reloads but I want it on window back or forward buttons and any navigation throughout the page as well... — Maher Naveed, Jun 08 '22 at 02:09
You'll need to combine a few methods, the `beforeunload` event is part of it. You may also need to use the [`history.block`](https://github.com/remix-run/history/blob/main/docs/blocking-transitions.md) method as well. — Drew Reese, Jun 08 '22 at 04:03
@DrewReese can you share an example or template of how I can use histor.block ? I think I'm doing it the wrong way . I'm actually importing useHistory hook from react-router-dom and then trying to use history.block? is it so or something else you wanna say? (error: useHistory hook module not found in react-router-dom) — Maher Naveed, Jun 08 '22 at 04:16
Tanya's answer below appears to provide the same code example from the docs I linked. Do you need more than that? — Drew Reese, Jun 08 '22 at 04:18
@DrewReese I just want to know .... where from the word history comes? — Maher Naveed, Jun 08 '22 at 04:43
It's the history object used by `react-router-dom`. Depending on RRD version it's a route prop or returned from the `useHistory` hook, or a custom history object that's created and passed to the router and available to import into other code in the app. — Drew Reese, Jun 08 '22 at 05:13
@DrewReese Thank you for support I did it as you suggested ... I combine two events (popup and onbeforeunload) and it's working now. — Maher Naveed, Jun 09 '22 at 03:43

score 1 · Answer 1 · answered Jun 07 '22 at 14:25

One way of doing this is :

import { Prompt } from 'react-router'

const MyComponent = () => (
  <>
    <Prompt
      when={shouldBlockNavigation}
      message='Do you want ot save data before leave?'
    />
    {/* Component JSX */}
  </>
)

If wants on page refresh or browser closing then add:

useEffect(() => {
  if (shouldBlockNavigation) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }
},[]);

Second way is to use history if using react-router

useEffect(() => {
let unblock = history.block((tx) => {
  // Navigation was blocked! Let's show a confirmation dialog
  // so the user can decide if they actually want to navigate
  // away and discard changes they've made in the current page.
  let url = tx.location.pathname;
  if (window.confirm(`Are you sure you want leave the page without saving?`)) {
    // Unblock the navigation.
    unblock();

    // Retry the transition.
    tx.retry();
  }
})
},[]);

Prompt was removed from react-rouer in the latest release ... I tried it and it gives the error (module not found). — Maher Naveed, Jun 08 '22 at 01:49

score 0 · Accepted Answer · answered Jun 09 '22 at 12:18

useEffect(() => {
        const unloadCallback = (event) => {
            event.preventDefault();
            event.returnValue = "";
            return "";
        };
        
        window.addEventListener("beforeunload", unloadCallback);
        return () => {
            window.addEventListener("popstate", confirmation());
            window.removeEventListener("beforeunload", unloadCallback);
        }
    }, []);

I just did it with this code sample (actually I combine two events to show dialogue whenever users leave a page) and it's working fine for me. Thanks to all of you guys ... Especially @DrewReese for the help

Page Leave Confirmation using React

2 Answers2