Question 204347 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Avoid realoading a page when user refresh or press F5 button

I have react page with table. Table has a column with hyperlink when I click on a particular hyperlink new page open with details about the clicked hyperlink or row.

<Route exact path="/employeedetails" element={<EmployeeDetails />} />

I want to avoid reloading Employee Details page when user refresh or press F5. Or How can I capture a refresh event and call the React component.

Tags:

2

Answers


  1. 0

    I had experienced same problem. Here is the some of solutions but there is no perfect way to block the refreshing as I know.

    1. block F5 keyCode
    const blockRefresh = (e) => {
  if ((e.which || e.keyCode) == 116) e.preventDefault();
}

window.addEventListener("keydown", blockRefresh);

    It will perfectly block the F5, if not, check the keyCode.

    1. set Beforeunload eventhandler
    const blockRefresh = (e) => {
  return "block Refresh"
}

window.addEventListener("beforeunload", blockRefresh);

    But, when you click the browser refresh button, it will be refreshed if there are routing history.

    Login or Signup to reply.
  2. 0

    You can use the window beforeunload event:

    function onBeforeUnload($event){

}
window.addEventListener("beforeunload", onBeforeUnload);

    You can know more about that event click here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search