I'm working on a react application, I want to block the browser buttons (back, forward, refresh) as well as the f5 key (which is not possible I guess because of the misuse) or at least redirect the user to the main route once one of those actions happens.

I was able to handle back and forward keys by adding an event listener on "popstate" but I couldn't handle the refreshing and F5 refresh

I tried this but it didn't work:

window.addEventListener('onbeforeunload', (e) => {
   e.preventDefault();
   e.stopPropagation();
   window.location.href = '/';}, {
       capture: true,
     });

any suggestions?