Question

0

155

Vistas

Page Leave Confirmation using React

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?

8 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

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();
  }
})
},[]);

8 months ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-25T06:24:02.407Z

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