How can i handle page refresh event in React.js

Question

I want to make a confirmation before user leaving the page. If he says ok then it would redirect to new page or cancel to leave.

but issue is that when user refresh page using browser refresh btn in google chrome that time below error occur

I tired this code but doesn't work in react.js please help

  window.hideWarning = false;
    window.addEventListener('beforeunload', (event) => {
      if (!window.hideWarning) {
        event.preventDefault();
        event.returnValue = '';
      }
    });

Also try this code

window.onbeforeunload = function () { return ''; }.bind(this);

Does this answer your question? [React | How to detect Page Refresh (F5)](https://stackoverflow.com/questions/50026028/react-how-to-detect-page-refresh-f5) — ToujouAya, Mar 10 '21 at 07:29
@ToujouAya Its works ! but when user refresh the page using browser refresh button that time this error occur — Mayur Vaghasiya, Mar 10 '21 at 07:33

score 1 · Accepted Answer · answered Jun 15 '21 at 07:00

1

Try this code it's work for me

 window.onbeforeunload = function () {
  if ("Some condition") {
     return '';
   }
 }.bind(this);

answered Jun 15 '21 at 07:00

score 0 · Answer 2 · answered Mar 10 '21 at 07:31

0

you can also use that

winodow.location.reload(true) winodow.location.reload(false)

answered Mar 10 '21 at 07:31

Darshan Dhameliya

1

it doesn't work !, I want show confirmation before user leaving the page. – Mayur Vaghasiya Mar 10 '21 at 07:41

score 0 · Answer 3 · edited Feb 15 '22 at 18:41

0

Please use this:

console.log(window.performance.navigation)

edited Feb 15 '22 at 18:41

Ihor Konovalenko

1,298
2
16
21

answered Feb 15 '22 at 12:57

Muhammad Fayyaz

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 15 '22 at 18:04
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 15 '22 at 20:04

How can i handle page refresh event in React.js

3 Answers3