во время работы над приложением в ремиксе я столкнулся со сценарием, чтобы предотвратить обратную навигацию, чтобы показать пользователю подсказку перед навигацией, чтобы сделать это, вы можете просто добавить следующий блок на страницу, которую вы хотите перехватить
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/