во время работы над приложением в ремиксе я столкнулся со сценарием, чтобы предотвратить обратную навигацию, чтобы показать пользователю подсказку перед навигацией, чтобы сделать это, вы можете просто добавить следующий блок на страницу, которую вы хотите перехватить

useEffect(() => {
    if (window) {
      window.history.pushState(null, document.title, window.location.href);
      window.onpopstate = function (e) {
        e.preventDefault();
        history.pushState(null, document.title, location.href);
         // add code to show promt and manually navigate
      };
    }
  }, []);

давайте подробно разберем этот фрагмент кода и концепцию, чтобы полностью предотвратить обратную навигацию. Но как бы просто это ни звучало, отключить кнопку «Назад» или навигационное событие невозможно. Нам придется полагаться на обходной путь, и этот рабочий процесс связан со стеком истории, который поддерживается браузером в виде стека, как показано на изображении ниже.

Ваше текущее состояние относится к текущему элементу стека, и давайте предположим, что на него есть указатель; когда вы вызываете history.back(), указатель переходит на более старый элемент стека, кстати, состояние события onpopstate такое же, как history.state. Вы просто получите элемент, на который в данный момент указывает указатель, который был изменен history.replaceState или добавлен history.pushState.

Итак, сначала нужно сбросить текущую вершину как текущую, чтобы обратное состояние всегда было самостоятельным.

window.history.pushState(null, document.title, window.location.href);

а затем, чтобы перехватить действие кнопки «Назад», мы сбрасываем функцию окна onpopstate, чтобы снова установить текущее состояние как текущее состояние, а затем выполнить собственный пользовательский блок кода.

window.onpopstate = function (e) {
        e.preventDefault();
        history.pushState(null, document.title, location.href);
         // add code to show promt and manually navigate
      };

и все это, хотя есть и другие способы, такие как использование

history.go(1) , history.forward() [кажется, не работает в мобильном сафари] или используя location.hash, не стесняйтесь смотреть на них тоже.

Ссылки:

https://linuxhint.com/window-history-object/

https://developer.mozilla.org/en-US/docs/Web/API/Window/history

https://hacks.mozilla.org/2011/03/history-api-changes-in-firefox-4/