В js мы иногда используем кнопку «назад» или «вперед» при переключении или перенаправлении страниц. Но иногда нам нужно использовать кнопки браузера "Назад" или "Вперед", и в этом случае, если мы хотим управлять этими кнопками и перенаправлять, функция goBack () может не работать. По этой причине нам может потребоваться каким-то образом контролировать это действие (действие нажатия кнопки возврата в браузере) и направлять его на нужные нам страницы. Например, вы создаете платформу и используете форму на своей странице, где участникам необходимо ввести свою информацию, или вы используете редактор форматированного текста, такой как Ckeditor / jodid и т. д., и вы хотите отобразить его окончательную версию на своей следующей странице. и после того, как вы увидите здесь окончательную версию, вы хотите вернуться к страницу формы и внесите необходимые изменения, нажав кнопку возврата Borwsers, чтобы отредактировать места, которые вам не нравятся. Да, вы можете сделать это, определив goBack () для кнопки, которую вы определили и создали на нашей собственной странице.
‹кнопка onClick = {() =› history.goBack ()} ›Назад ‹/button›
Но что, если пользователь нажмет кнопку «Назад» в браузере? ваша страница может перейти на главную или на две предыдущие страницы, если вы ее не редактировали. По этой причине вы должны управлять кнопкой возврата в браузере и заставлять ее работать так, как вы хотите. Как мы можем это сделать? Мы можем сделать это двумя способами, по крайней мере, я нашел эти два метода, если кто-то найдет разные методы, вы можете поделиться ими в комментариях, чтобы мы могли вместе изучить новые методы.
1- Первый способ - отключить в браузере кнопку "Назад", то есть предотвратить этот процесс, когда пользователь хочет нажать кнопку "Назад" в браузере. Таким образом, пользователь нажмет определенную нами кнопку возврата, и наша функция goBack сработает и перейдет на предыдущую страницу. Для этого вы можете использовать одно из следующих действий:
a) ‹кнопка onClick = {() history.goBack ()}› Назад ‹/button›
b) ‹a href="javascript: history.go(-1)"› Вернуться ‹/a›
c) ‹a href =” ## ”onClick =” history.go (-1); return false; »› Вернуться ‹/a›
2- Второй способ - управлять кнопкой браузера "Назад" и отправлять ее на нужную страницу. Итак, как мы это сделаем? В Stackoverflow есть много статей и вопросов по этому поводу, вы можете найти там разные ответы, но я поделюсь с вами методом, который я считаю самым простым и понятным, конечно, для Js.
const onBackButtonEvent = (e) = ›{
e.preventDefault (); var currentLocation = window.location.pathname;
history.push (`$ {currentLocation} / mypage / new`)};
useEffect (() = ›{window.addEventListener (‘ popstate ’, onBackButtonEvent); return () =› {window.removeEventListener (‘popstate’, onBackButtonEvent);
};}, [])
Теперь я постараюсь вкратце объяснить, что здесь происходит. Прежде всего, чтобы наше приложение осознало, что браузер нажал кнопку возврата, мы добавляем в useEffect: window.addEventListener ('popstate', onBackButtonEvent); Конечно, после того, как мы получим то, что хотим позже, мы можем удалить это: window.removeEventListener ('popstate', onBackButtonEvent); Что ж, здесь может быть вопрос . Что произойдет, если мы не добавим = ›window.removeEventListener ('popstate', onBackButtonEvent);? В качестве ответа я могу сказать, что его не будет в ваш разум, пока вы не попробуете его, поэтому, даже если я скажу да или нет, вы можете попробовать код, которым я поделился выше, скопировав его, чтобы сделать его более постоянным.
Сделав это, = ›window.addEventListener ('popstate', onBackButtonEvent); теперь мы знаем, что onBackButtonEvent будет работать благодаря addEventListener. Теперь пора определить, что это за функция сделаю, когда позвонят.
const onBackButtonEvent = (e) = ›{
e.preventDefault ();
var currentLocation = window.location.pathname;
history.push (`$ {currentLocation} / mypage / new`)
};
Здесь мы вызываем нашу функцию. Эй, братан, сначала сделай e.preventDefault (); и избавь меня от бремени, а затем для меня самое главное - перейти к страницу, которую я хочу, когда я нажимаю кнопку возврата в браузере. Мы делаем это, беря URL-адрес страницы, который я подробно объясню в своей следующей статье.
var currentLocation = window.location.pathname;
history.push (`$ {currentLocation} / mypage / new`)
Короче говоря, чтобы резюмировать ситуацию, мы заполнили информацию со страницы формы и перешли на этап предварительного просмотра, а затем, когда пользователь хочет использовать кнопку возврата браузера вместо кнопки, которую мы помещаем на страницу, мы направляем его на страницу мы хотим, я объяснил это здесь на примере перенаправления на предыдущую страницу, но вы можете перенаправить на нужную страницу).
