Чтобы создать кнопку «Назад» в React, вам необходимо:
- Использовать хук, когда пользователь нажимает на кнопку
В этой статье шаг за шагом будет рассмотрено полное решение.
Давайте приступим 😎.
Реактивный маршрутизатор
library — это легкий пакет, который обеспечивает простую маршрутизацию в React.
Установить можно так:
npm install react-router-dom У меня здесь есть php-код, и я хотел бы создать “обратный” href, чтобы вернуться туда, где я был раньше. Вот что у меня есть:
<input type="submit" <a href="#" onclick="history.back();">"Back"</a> <html> <head></head> <body> <?php // get form selection $day = $_GET['day']; // check value and select appropriate item if ($day == 1) { $special = 'Chicken in oyster sauce'; } elseif ($day == 2) { $special = 'French onion soup'; } elseif ($day == 3) { $special = 'Pork chops with mashed potatoes and green salad'; } else { $special = 'Fish and chips'; } ?> <h2>Today's special is:</h2> <?php echo $special; ?> <input type="submit" <a href="#" onclick="history.back();">"Back"</a> </body> </html>
17 золотых значков
99 серебряных значков
186 бронзовых знаков
спросил 7 сен 2010 в 14:52
25 золотых значков
67 серебряных значков
86 бронзовых знаков
<button onclick="history.go(-1);">Back </button> ответил 7 сен 2010 в 14:56
Если вы хотите сделать это (то, что, я думаю, вы пытаетесь сделать прямо сейчас), замените эту строку
<input type="submit" <a href="#" onclick="history.back();">"Back"</a> <button type="button" onclick="history.back();">Back</button> Если вы не хотите полагаться на JavaScript, вы можете получить HTTP_REFERER
переменная, а затем укажите ее в ссылке, подобной этой:
<a href="<?php echo $_SERVER['HTTP_REFERER'] ?>">Back</a> ответил 7 сен 2010 в 14:54
4 золотых значка
30 серебряных значков
45 бронзовых знаков
<a href="javascript:history.back">Back</a>
<a class=".back_button" href="javascript:history.back">Back</a>`
.back_button {
display:block;
width:100px;
height:30px;
text-align:center;
background-color:yellow;
border:1px solid #000000;
}
ответил 30 мая 2012 в 7:23
1 серебряный значок
1 бронзовый значок
Вам нужно указать браузеру, что вы используете javascript:
<a href="javascript:history.back">Back</a>
Кроме того, ваш элемент ввода кажется неуместным в вашем коде.
ответил 7 сен 2010 в 14:56
15 золотых значков
56 серебряных значков
71 бронзовый знак
<input type="submit" <a href="#" onclick="history.back();">"Back"</a> Недопустимый HTML из-за незакрытого input
элемент.
<a href="#" onclick="history.back;">"Back"</a>
ответил 7 сен 2010 в 14:56
3 золотых значка
22 серебряных значка
21 бронзовый знак
function redirection() { <?php $send=$_SERVER['HTTP_REFERER'];?> var redirect_to="<?php echo $send;?>"; window.location = redirect_to; } ответил 21 апр 2018 в 10:00
В основном мой код отправляет данные на следующую страницу следующим образом:
**Referring Page**
$this = $_SERVER['PHP_SELF'];
echo "<a href='next_page.php?prev=$this'>Next Page</a>";
**Page with button**
$prev = $_GET['prev'];
echo "<a href='$prev'><button id='back'>Back</button></a>";
9 золотых значков
47 серебряных значков
85 бронзовых знаков
ответил 9 мая 2018 в 12:12
Есть ли функция, которую я могу добавить в качестве события нажатия кнопки, чтобы браузер возвращался на предыдущую страницу?
<input name="action" type="submit" value="Cancel"/>
спросил 9 ноя 2011 в 15:43
Док Холидей
32 золотых значка
97 серебряных значков
151 бронзовый знак
Добавьте это в свой элемент ввода
<input action="action" onclick="window.history.go(-1); return false;" type="submit" value="Cancel"
/>
1 золотой значок
19 серебряных значков
32 бронзовых знака
ответил 9 ноя 2011 в 15:45
history.back() history.go(-1) Поместите это на кнопку onclick
ручка. It should look like this:
<input name="action" onclick="history.back()" type="submit" value="Cancel"/>
10 gold badges
63 silver badges
89 bronze badges
answered Nov 9, 2011 at 15:44
2 gold badges
20 silver badges
18 bronze badges
For Going to previous page
<a href="javascript: history.go(-1)">Go Back</a> <a href="##" onClick="history.go(-1); return false;">Go back</a> if we want to more than one step back then increase
For going 2 steps back history.go(-2)
For going 3 steps back history.go(-3)
For going 4 steps back history.go(-4)
and so on....... answered Jun 3, 2013 at 10:52
Rizwan Gill
1 gold badge
17 silver badges
29 bronze badges
Works for me everytime
<a href="javascript:history.go(-1)"> <button type="button"> Back </button>
</a>
7 gold badges
20 silver badges
32 bronze badges
answered Oct 14, 2019 at 13:04
<input name="action" type="submit" value="Cancel" onclick="window.history.back();"/> answered Nov 9, 2011 at 15:44
5 gold badges
19 silver badges
31 bronze badges
Simple. One line.
<button onclick="javascript:window.history.back();">Go Back</button> Like Wim’s and Malik’s answer, but just in one line.
answered May 12, 2018 at 20:01
<button onclick="history.go(-1);">Go back</button> I prefer the .go(-number)
method as then, for 1 or many ‘backs’ there’s only 1 method to use/remember/update/search for, etc.
answered Nov 9, 2011 at 16:14
Michael Durrant
97 gold badges
332 silver badges
497 bronze badges
<button onclick="goBack()">Go Back</button>
<script>
function goBack() { window.history.back();
}
</script> answered Nov 29, 2016 at 10:05
Malik Khalil
2 gold badges
39 silver badges
33 bronze badges
history.go(-1); answered Nov 9, 2011 at 15:44
Rich O’Kelly
9 gold badges
83 silver badges
114 bronze badges
Access window.history
and then call back()
window.history.back() answered Aug 24, 2021 at 12:31
Gaurav Patil
10 silver badges
20 bronze badges
This is the only thing that works on all current browsers:
<script>
function goBack() { history.go(-1);
}
</script>
<button onclick="goBack()">Go Back</button> answered Jan 26, 2017 at 13:57
Wim Mostrey
5 silver badges
8 bronze badges
the only one that worked for me:
function goBackAndRefresh() { window.history.go(-1); setTimeout(() => { location.reload(); }, 0);
} answered Feb 17, 2021 at 18:15
2 gold badges
21 silver badges
24 bronze badges
history.back()
or window.history.back()
You also go back to N number of pages with this one
history.go(-1)
answered Sep 3, 2022 at 23:48
<a onclick="window.history.go(-1); return false;" style="cursor: pointer;">Go Back</a> answered Jul 30, 2020 at 2:37
Fezal halai
7 silver badges
14 bronze badges
Клавиатура — неотъемлемая часть компьютера, ее используют каждый день миллионы людей по всему миру. Как правило, она состоит из привычной раскладки символов, которая меняется в зависимости от языка. Также на клавиатуре присутствуют функциональные клавиши и различные сочетания клавиш, облегчающие работу с компьютером. Однако, не всем пользователям понятно, где находится кнопка «назад» на клавиатуре.
Кнопка «назад» (или «backspace» на английском языке) предназначена для удаления одного или нескольких символов из строки текста. Довольно легко запомнить ее расположение, поскольку она находится в верхнем правом углу основной клавиатуры. Однако, некоторые производители клавиатур эргономичного дизайна могут размещать ее в несколько другом месте.
Также на клавиатуре существует еще одна кнопка, которая выполняет функцию «назад» — это стрелка «влево», расположенная в левом верхнем углу. В некоторых случаях, например, при работе в браузере, эта кнопка призвана вернуть пользователя на предыдущую страницу.
Теперь, когда мы разобрались с расположением кнопки «назад» на клавиатуре, проще использовать ее на практике. Но, как и в случае с любыми другими клавишами, важно запомнить сочетания с другими клавишами и дополнительные функции, чтобы более эффективно выполнять задачи на компьютере.
Поиск кнопки «назад» на компьютерной клавиатуре
Кнопка «назад» на компьютерной клавиатуре является одной из наиболее используемых клавиш при работе с веб-браузером или программами, которые имеют историю переходов. Однако, многие пользователи могут столкнуться с проблемой не нахождения данной кнопки на клавиатуре.
Обычно кнопка «назад» на клавиатуре располагается в верхнем левом углу, и имеет символ стрелки, направленной влево. На большинстве клавиатур это символ находится на одной кнопке с буквой «Q», она же – «клавиша Escape».
Однако, на некоторых клавиатурах, клавиша «назад» может быть расположена в другом месте. Например, на ноутбуках она может быть на клавише «FN» в сочетании с «стрелкой влево» или «Backspace». Некоторые производители клавиатур могут также переносить функции клавиш в другие места: поэтому, чтобы найти клавишу «назад» на своей клавиатуре – необходимо обратить внимание на маркировку клавиш и инструкцию к устройству.
Также, если клавиши «назад» на клавиатуре не предусмотрено – ее можно эмулировать в программе. Для этого можно использовать сочетание клавиш «Ctrl + left arrow» или «Alt + left arrow».
Объяснение функции кнопки «назад» на клавиатуре
Кнопка «назад»
на клавиатуре является одной из самых важных функциональных кнопок, которая позволяет пользователям вернуться на предыдущую страницу в интернет-браузере или приложении. Эта кнопка полезна для того, чтобы быстро просмотреть предыдущую страницу, которую вы посещали, без необходимости ввода URL-адреса заново или использования других элементов интерфейса.
Кнопка «назад»
обычно расположена рядом с клавишей «вперед» на клавиатуре, что делает навигацию по страницам более интуитивной и удобной. Она также может быть использована для просмотра страницы в персональном кабинете или для того, чтобы перейти на предыдущий шаг в процессе заполнения онлайн-формы.
В целом, кнопка «назад» на клавиатуре является незаменимым инструментом для быстрой и удобной навигации в интернет-браузерах и приложениях. Она может использоваться в различных ситуациях, но ее основная функция — вернуться на предыдущую страницу без необходимости ввода URL-адреса заново.
В js мы иногда используем кнопку «назад» или «вперед» при переключении или перенаправлении страниц. Но иногда нам нужно использовать кнопки браузера “Назад” или “Вперед”, и в этом случае, если мы хотим управлять этими кнопками и перенаправлять, функция goBack ()
может не работать. По этой причине нам может потребоваться каким-то образом контролировать это действие (действие нажатия кнопки возврата в браузере) и направлять его на нужные нам страницы. Например, вы создаете платформу и используете форму на своей странице, где участникам необходимо ввести свою информацию, или вы используете редактор форматированного текста, такой как Ckeditor / jodid и т. д., и вы хотите отобразить его окончательную версию на своей следующей странице. и после того, как вы увидите здесь окончательную версию, вы хотите вернуться к страницу формы и внесите необходимые изменения, нажав кнопку возврата Borwsers, чтобы отредактировать места, которые вам не нравятся. Да, вы можете сделать это, определив goBack ()
для кнопки, которую вы определили и создали на нашей собственной странице.
Но что, если пользователь нажмет кнопку «Назад» в браузере? ваша страница может перейти на главную или на две предыдущие страницы, если вы ее не редактировали. По этой причине вы должны управлять кнопкой возврата в браузере и заставлять ее работать так, как вы хотите. Как мы можем это сделать? Мы можем сделать это двумя способами, по крайней мере, я нашел эти два метода, если кто-то найдет разные методы, вы можете поделиться ими в комментариях, чтобы мы могли вместе изучить новые методы.
1-
Первый способ – отключить в браузере кнопку “Назад”, то есть предотвратить этот процесс, когда пользователь хочет нажать кнопку “Назад” в браузере. Таким образом, пользователь нажмет определенную нами кнопку возврата, и наша функция goBack сработает и перейдет на предыдущую страницу. Для этого вы можете использовать одно из следующих действий:
b) ‹a href=”javascript: history.go(-1)”› Вернуться ‹/a›
c) ‹a href =” ## ”onClick =” history.go (-1); return false; »› Вернуться ‹/a›
2-
Второй способ – управлять кнопкой браузера “Назад” и отправлять ее на нужную страницу. Итак, как мы это сделаем? В Stackoverflow есть много статей и вопросов по этому поводу, вы можете найти там разные ответы, но я поделюсь с вами методом, который я считаю самым простым и понятным, конечно, для Js.
e.preventDefault (); var currentLocation = window.location.pathname;
Теперь я постараюсь вкратце объяснить, что здесь происходит. Прежде всего, чтобы наше приложение осознало, что браузер нажал кнопку возврата, мы добавляем в useEffect: window.addEventListener (‘popstate’, onBackButtonEvent);
Конечно, после того, как мы получим то, что хотим позже, мы можем удалить это: window.removeEventListener (‘popstate’, onBackButtonEvent)
; Что ж, здесь может быть вопрос . Что произойдет, если мы не добавим = › window.removeEventListener (‘popstate’, onBackButtonEvent)
;? В качестве ответа я могу сказать, что его не будет в ваш разум, пока вы не попробуете его, поэтому, даже если я скажу да или нет, вы можете попробовать код, которым я поделился выше, скопировав его, чтобы сделать его более постоянным.
Сделав это, = › window.addEventListener (‘popstate’, onBackButtonEvent);
теперь мы знаем, что onBackButtonEvent будет работать благодаря addEventListener. Теперь пора определить, что это за функция сделаю, когда позвонят.
var currentLocation = window.location.pathname;
var currentLocation = window.location.pathname;
Короче говоря, чтобы резюмировать ситуацию, мы заполнили информацию со страницы формы и перешли на этап предварительного просмотра, а затем, когда пользователь хочет использовать кнопку возврата браузера вместо кнопки, которую мы помещаем на страницу, мы направляем его на страницу мы хотим, я объяснил это здесь на примере перенаправления на предыдущую страницу, но вы можете перенаправить на нужную страницу).
What is the simplest way to create an <a>
tag that links to the previous web page? Basically a simulated back button, but an actual hyperlink. Client-side technologies only, please.
<script> document.write('<a href="' + document.referrer + '">Go Back</a>');
</script> Is document.referrer
reliable? Cross-browser safe? I’ll be happy to accept a better answer.
1 gold badge
26 silver badges
37 bronze badges
asked Jan 11, 2012 at 5:12
And another way:
<a href="javascript:history.back()">Go Back</a>
1 gold badge
26 silver badges
37 bronze badges
answered Jan 11, 2012 at 5:19
4 gold badges
27 silver badges
40 bronze badges
This solution has the benefit of showing the URL of the linked-to page on hover, as most browsers do by default, instead of history.go(-1)
or similar:
<script> document.write('<a href="' + document.referrer + '">Go Back</a>');
</script> answered Jan 11, 2012 at 6:27
9 gold badges
46 silver badges
74 bronze badges
This solution gives you the best of both worlds
- Users get to hover over the link to see the URL
- Users don’t end up with a corrupted back-stack
More details in the code comments below.
var element = document.getElementById('back-link');
// Provide a standard href to facilitate standard browser features such as
// - Hover to see link
// - Right click and copy link
// - Right click and open in new tab
element.setAttribute('href', document.referrer);
// We can't let the browser use the above href for navigation. If it does,
// the browser will think that it is a regular link, and place the current
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() { history.back(); return false;
} <a id="back-link">back</a>
ответил 11 сен 2017 в 19:36
V Махарадж
5 золотых значков
30 серебряных значков
31 бронзовый знак
Проще всего использовать history.go(-1);
<a href="#" onclick="history.go(-1)">Go Back</a>
1 золотой значок
26 серебряных значков
37 бронзовых знаков
ответил 11 января 2012 в 5:15
1 золотой значок
23 серебряных знака
24 бронзовых знака
вы можете попробовать javascript
<A HREF="javascript:history.go(-1)"> см. JavaScript
Кнопка «Назад»
для отображения URL ссылки http://www.javascriptkit.com/javatutors/crossmenu2.shtml
function showtext(thetext) { if (!document.getElementById) return textcontainerobj = document.getElementById("tabledescription") browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : "" instantset(baseopacity) document.getElementById("tabledescription").innerHTML = thetext.href highlighting = setInterval("gradualfade(textcontainerobj)", 50)
} <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>
1 золотой значок
26 серебряных значков
37 бронзовых знаков
ответил 11 января 2012 в 5:15
Хемант Металия
18 золотых значков
72 серебряных знака
91 бронзовый знак
Для возврата на предыдущую страницу с помощью тега привязки <a>
, ниже 2 метода работы и из них 1-й
на быстрее
и иметь одно большое преимущество
при переходе на предыдущую страницу.
Я пробовал оба метода.
<script> Приведенный выше метод
document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
отлично работает, если вы щелкнули ссылку и
открыли ссылку в новой вкладке
в текущем окне браузера.
Приведенный выше метод
работает нормально, только если вы щелкнули ссылку и
открыли ссылку в текущей вкладке <a href="javascript:history.back()">Go Back</a>
в текущем окне браузера.
Это не будет работать, если у вас есть открытая ссылка в Новой вкладке. Здесь
не будет работать, если ссылка открыта в новой вкладке веб-браузера.
ответил
21 декабря 2018 в 18:03
1 золотой значок
18 серебряных значков
28 бронзовых знаков
Простые пути
history.go(-1)
1 золотой значок
26 серебряных значков
37 бронзовых знаков
ответил 11 января 2012 в 5:18
- ответил
11 января 2012 в 5:17
5 золотых значков
21 серебряный значок
28 бронзовых знаков
ответил 7 сентября 2017 в 12:16
Рои Гавирел
12 золотых значков
67 серебряных значков
94 бронзовых знака
Лучше всего использовать кнопку
ответил 6 апр 2020 в 13:18
<a>
Вы также можете использовать
рядом document.referrer
показывать ссылку только тогда, когда действительно есть куда вернуться: <script>
document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>
ответил
10 фев 2017 в 11:45
Леонид Васильев
4 золотых значка
36 серебряных значков
50 бронзовых знаков
Я использовал window.history и вернул false, чтобы браузер не перемещался по href (поведение по умолчанию).
<a href="www.web.com" onclick="window.history.go(-1); return false;"> Link </a> answered Dec 17, 2021 at 10:51
Suman Deol
3 silver badges
10 bronze badges
history.go(-1)
doesn’t work if you click around in the 2nd domain or if the referrer is empty.
So we have to store the historyCount on arriving to this domain and go back the number of navigations in this side minus 1.
// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) { // store current history length localStorage.setItem('historyLength', `${history.length}`);
}
// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', () => history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
); answered Aug 5, 2020 at 23:30
Сегодня мы расскажем об одной из самых полезных кнопок на клавиатуре — кнопке «назад». Она позволяет вернуться на предыдущую страницу в браузере или закрыть открытое окно на компьютере. Однако, не все пользователи знают, где находится данная кнопка на клавиатуре. В этой статье мы расскажем, где ее найти и как ее использовать.
В зависимости от типа клавиатуры, место расположения кнопки «назад» может различаться. Если у вас стандартная клавиатура на компьютере, то кнопка «назад» находится в верхнем левом углу клавиатуры. Обычно это стрелка, которая направлена влево и расположена на клавише с буквой «Z».
В некоторых случаях, кнопка «назад» может быть также на клавише «Backspace», расположенной ниже клавиши «Enter». Но чаще всего она находится на клавише с буквой «Z». Если вы используете ноутбук, то кнопка «назад» находится на том же месте, что и на стандартной клавиатуре компьютера.
Использование кнопки «назад» через клавиатуру
Для многих пользователей наличие на клавиатуре кнопки «назад» является удобным и привычным способом вернуться на предыдущую страницу в браузере. Однако, не всегда эта кнопка расположена в удобном месте для быстрого доступа.
Часто кнопка «назад» находится в верхней левой части клавиатуры и помечена стрелкой, направленной влево. Кроме того, на клавиатурах ноутбуков, где клавиши часто расположены компактно, кнопка «назад» может быть объединена с другими функциональными клавишами и иметь другую пометку.
Для более удобного использования кнопки «назад» через клавиатуру рекомендуется научиться использовать сочетание команд клавиш. Например, в Windows и Linux универсальным комбинациями являются Alt + Backspace
или Alt + стрелка влево
. В macOS же можно воспользоваться комбинацией Command + стрелка влево
.
В случае, если на клавиатуре отсутствует кнопка «назад» и сочетания клавиш не работают, следует воспользоваться встроенной в браузер функцией «назад». Обычно она находится в верхнем левом углу браузера и имеет надпись «Назад».
Где расположена кнопка «назад» на разных типах устройств
Клавиатура компьютера.
Кнопка «назад» находится в левом верхнем углу клавиатуры и называется «Backspace». Она является одной из наиболее используемых на клавиатуре и позволяет удалять символы слева от курсора.
Мобильный телефон.
В большинстве случаев кнопка «назад» на мобильных телефонах располагается в нижней части экрана и обычно имеет стрелочную иконку, указывающую налево. Некоторые модели могут иметь физическую кнопку «назад» внизу экрана или на боковой стороне устройства.
Планшеты и умные часы.
На умных часах и планшетах кнопка «назад» может варьировать от производителя к производителю. Некоторые устройства имеют иконку назад в нижней части экрана, а другие могут иметь физическую кнопку «назад» на боковой стороне устройства.
Телевизоры и пульты дистанционного управления.
Кнопка «назад» на телевизорах и пультах дистанционного управления обычно имеет иконку назад и находится в центре круговой навигационной кнопки. В некоторых случаях она может быть описана словом «назад» или иметь стрелочную иконку, указывающую налево.
Веб-браузер.
Веб-браузеры часто используют кнопку «назад» для перехода на предыдущую страницу в истории просмотра. Кнопка «назад» может располагаться в левом верхнем углу окна браузера, либо на панели инструментов, в зависимости от настроек и конфигурации браузера.
Игровые консоли.
Кнопка «назад» на игровых консолях обычно располагается на боковой стороне контроллера и имеет иконку назад. При нажатии на нее происходит выход из текущего меню или из игры в режиме паузы.
- Кнопка «назад» может варьировать на разных типах устройств;
- В большинстве случаев кнопка «назад» имеет стрелочную иконку, указывающую налево;
- Кнопка «назад» находится в левом верхнем углу клавиатуры и называется «Backspace»;
- Некоторые устройства имеют иконку назад в нижней части экрана, а другие могут иметь физическую кнопку «назад» на боковой стороне устройства;
- На телевизорах и пультах дистанционного управления кнопка «назад» обычно имеет иконку назад и находится в центре круговой навигационной кнопки;
- Веб-браузеры часто используют кнопку «назад» для перехода на предыдущую страницу в истории просмотра.
Полезные советы по использованию кнопки «назад»
1. Не жмите на нее слишком быстро
Многие пользователи нажимают кнопку «назад» на клавиатуре очень быстро, считая, что это поможет быстрее вернуться на предыдущую страницу. Однако, такой подход может привести к ошибке, когда браузер не успевает загрузить страницу и пользователь попадает на ошибочную страницу. Поэтому, необходимо нажимать на кнопку «назад» со следующей частотой — один раз в 3-4 секунды.
2. Используйте кнопку «назад» только для перехода на предыдущую страницу
Кнопка «назад» исполняет одну основную функцию — возврат на предыдущую страницу. Не стоит использовать ее для навигации по сайту или возврата на более ранние страницы в истории поиска. Для таких действий лучше использовать меню навигации или историю поиска браузера.
3. Используйте бэкспейс (backspace) как альтернативу кнопке «назад»
Если у вас нет клавиатуры с кнопкой «назад», то можно использовать клавишу «backspace». Эта клавиша тоже выполняет функцию перехода на предыдущую страницу. Для ее использования необходимо выделить поле ввода браузера и нажать клавишу «backspace».
4. Сохраняйте информацию перед возвратом на предыдущую страницу
Перед тем, как нажать на кнопку «назад», убедитесь, что информация, которую вы хотели сохранить, была сохранена. Например, если вы написали длинное письмо или заполняли форму, то необходимо сохранить эту информацию перед возвратом на предыдущую страницу. В этом случае можно использовать сочетание клавиш «Ctrl + C», чтобы скопировать данные в буфер обмена и вставить их на страницу после возврата на нее.
5. Если кнопка «назад» не работает, то используйте меню навигации
Иногда кнопка «назад» на клавиатуре может не работать из-за ошибки в браузере. В этом случае можно использовать меню навигации, которое находится в верхней части браузера, чтобы вернуться на предыдущую страницу. Для этого необходимо кликнуть на стрелку влево, которая находится слева от адресной строки браузера.
Пользователи часто путаются и расстраиваются, когда взаимодействуют с кнопкой “Назад”. Как спроектировать этот элемент правильно и где разместить его в наших интерфейсах?
В юзабилити-тестировании не так много вещей, повторяющихся снова и снова. Одна из них — тревога, которую испытывают люди, когда им приходится возвращаться на предыдущую страницу. Пользователи обычно не слишком доверяют кнопке “Назад” в браузере
, и на то есть веские причины. Все мы бывали в ситуациях, когда эта кнопка просто не срабатывала, как ожидалось, и уводила нас от цели, а не приближала к ней.
Адамом Сильвером
.
Представьте, что вы находитесь внутри многоэтапного процесса, такого как оформление заказа. В этом случае кнопка “Назад” зачастую возвращает вас в самое начало процесса
, а не на предыдущий шаг, при этом все ваши данные испаряются без следа.
А иногда нам приходится многократно вводить важные, конфиденциальные сведения, например, номера кредитных карт, потому что их нельзя сохранить по соображениям безопасности. Не говоря уже о перемещениях в одностраничных приложениях, которые не всегда соответствуют ожиданиям.
Как же сделать кнопку “Назад” более предсказуемой и полезной? Давайте рассмотрим несколько идей и примеров использования.
Страх перед кнопкой “Назад” в браузере
На первый взгляд кнопка “Назад” не кажется большой проблемой, не так ли? И, конечно же, люди активно ей пользуются
. Однако они часто думают дважды
, прежде чем нажать на нее. В основном, они просто боятся потерять свои данные или определенное состояние страницы, на которой сейчас находятся — и это вполне объяснимо, поскольку иногда непонятно, куда их приведет браузер.
Baymard Institute
)
Вот почему нередко люди делают скриншоты текущей страницы
или открывают ту же страницу в другой вкладке, чтобы убедиться, что их данные (по крайней мере, с этой страницы) все еще доступны в браузере для копирования.
Серьезные проблемы начинают проявляться, когда мы добавляем в интерфейс оверлеи, якорные ссылки, галереи изображений и динамические представления. Например, если пользователь листает изображения в карусели
, меняет вид дашборда или переключает состояния на странице с ценами
. Должна ли кнопка “Назад” возвращать элементы в прежнее состояние или переносить человека на предыдущую страницу?
Однозначного ответа на этот вопрос нет, но есть некоторые дизайн-шаблоны, которые работают лучше других.
Всегда закрывайте большие оверлеи кнопкой “Назад”
Исследования показывают
, что чем сильнее новая область просмотра отличается визуально, тем больше вероятность того, что пользователи воспримут ее как отдельную страницу
. В связи с этим возникают ожидания, что кнопка “Назад” вернет человека на предыдущую “страницу”, хотя технически это может быть не так.
Eric Bailey
)
Это касается списка товаров, который появляется после фильтрации / сортировки, формы заказа в виде аккордеона, но также может быть полезно для якорных ссылок, расширенного и усеченного контента
— особенно если разделы длинные. В этих ситуациях разумно
привести поведение кнопки браузера “Назад” в соответствие с ожиданиями пользователя — с помощью History API
.
Однако, конечно, мы не хотим засорять историю пользователя
ненужными состояниями или страницами. Когда человек просматривает галерею изображений в статье, мы, вероятно, не должны добавлять каждое изображение в историю браузера, поскольку это значительно усложнит переход к “настоящей” предыдущей странице.
Самое главное, что посетители редко воспринимают состояние карусели
как “другую страницу”. До тех пор, пока страница существенно не меняется, нам не следует добавлять состояния в историю. Это касается чекбоксов, выпадающих меню, переключателей просмотра и динамических секций, поскольку они меняют содержимое одной и той же страницы.
Наконец, всякий раз, когда пользователь может потерять данные, вернувшись назад, например, из оверлея, несомненно, стоит предложить ему подтвердить свое действие
и сообщить, что он может потерять некоторые данные.
Положение пользовательской кнопки “Назад”
Несмотря на то, что мы настроили кнопку “Назад” в соответствии с ожиданиями пользователей, некоторые все равно будут беспокоиться о том, действительно ли она работает должным образом. Хороший способ решить эту проблему — добавить в интерфейс кастомную кнопку “Назад”, специфичную для конкретной формы
.
Пользователи воспринимают стандартную кнопку браузера и кастомную кнопку “Назад”, эффектно вписанную в интерфейс, совершенно по-разному. Если поведение кнопки браузера не всегда очевидно, то от специальной оригинальной кнопки они ожидают “ правильного поведения
”. Следовательно, люди с большим доверием относятся к таким кнопкам и меньше сомневаются при взаимодействии с ними.
Но где же на самом деле должна располагаться эта кастомная кнопка?
Steve Schoger
)
Стив Шогер утверждает
, что независимо от того, как выровнены кнопки в форме — по правому или по левому краю, — всегда стоит располагать основное действие с внешней стороны
. Это означает, что кнопка “Назад”, которая также должна иметь меньший визуальный вес, будет располагаться рядом с кнопкой “Далее”.
Это хорошо работает для форм, но если пользователь приходит с обзорной страницы (страницы раздела), мы можем дополнительно отобразить липкую панель
, плавающую иконку или хлебные крошки
, позволяющие вернуться на нее. Или же просто расположить кнопку “Назад” на видном месте, например, в верхней части страницы.
Возможно, стоит поместить кнопку “Назад” над формой
Действительно, приведенный выше пример — довольно распространенный эффективный паттерн. Однако, по моему опыту, он также может создавать определенные проблемы, поскольку время от времени пользователи случайно нажимают не на ту кнопку
— в основном потому, что эти кнопки расположены слишком близко друг к другу.
Поэтому я всегда придерживался мнения, что стоит разместить их как можно дальше
друг от друга и протестировать это решение.
Adam Silver
)
Адам Сильвер предлагает
разместить кнопку “Назад” над формой
, как это сделал Джо Ланман, дизайнер Gov.uk. По словам Джо, при таком подходе она находится примерно там же
, где и в большинстве браузеров. Кроме того, такая кнопка, вероятно, не нужна внизу страницы: ” если пользователи заполнят форму и кликнут “Назад”, они
потеряют свои ответы
“.
Пользовательская кнопка “Назад” должна выглядеть как интерактивный элемент
Стоит подчеркнуть, что кнопка “Назад”, расположенная над формой, должна выглядеть как интерактивный элемент
. Это может быть подчеркнутая ссылка или отдельная кнопка, которая действительно выглядит как кнопка.
Когда кнопка / ссылка “Назад” сливается со страницей, пользователи не могут найти способ вернуться и обычно начинают поиск в нижней части страницы. Чтобы эта кнопка работала, она должна быть видимой и заметной
.
Gov.uk
ссылка “Назад” расположена сверху, подчеркнута и выглядит как интерактивный элемент. ( Изображение:
Gov.uk
)
На сайте Gov.uk
ссылка “Назад” расположена сверху (там, где пользователи обычно ожидают увидеть хлебные крошки), подчеркнута и выглядит как интерактивный элемент. Здесь есть только одна заметная кнопка — “Продолжить”.
Еще одна проблема, с которой я столкнулся при использовании этого шаблона, заключается в следующем: когда форма длинная, пользователи могут слишком быстро прокручивать страницу вниз, даже не заметив кнопку “Назад” в верхней части страницы. В тот момент, когда они останавливаются, кнопка оказывается вне поля зрения
, особенно на мобильных устройствах, и поэтому им может быть трудно найти надежный способ вернуться назад.
Когда форма короткая
, подобных проблем не возникает: формы Gov.uk как раз спроектированы по принципу ” Один шаг — одна страница
“.
Располагайте кнопки “Назад” и “Далее” далеко друг от друга
Вам может показаться вполне логичным сгруппировать элементы управления “Назад” и “Далее”, чтобы пользователи могли быстро перемещаться туда-сюда. Это действительно разумно в ситуациях, когда путь пользователя предполагает много переходов, что характерно для различных конфигураторов, кастомайзеров и мастеров форм
.
кастомайзере обуви Van’s shoes
, — небольшой, но эффективный компонент, который помогает клиентам плавно переходить от одного шага к другому. Однако важно, чтобы на каждом шаге были адекватные настройки по умолчанию. (
Посмотрите видео
)
Кастомайзер Van’s shoes
содержит панель навигации для быстрых переходов, а также переключатель “вперед / назад”. На узких экранах все доступные опции перечислены горизонтально, и чтобы выбрать одну из них, покупатель должен свайпнуть влево или вправо.
177milkstreet
с красивым лейаутом для отображения пошаговых рецептов. Этот шаблон можно применить и к конфигураторам. (
Посмотрите видео
)
В рецептах 177milkstreet
кнопки “Назад” / “Далее” сгруппированы в нижней части разделенного экрана, а сами шаги расположены вертикально.
подталкивает пользователей к завершению настройки.
На сайте Fully
кнопки “Назад” и “Далее” расположены очень далеко друг от друга
. Пользователи могут вернуться в любой момент, нажав на стрелку “Назад”, которая расположена в левом верхнем углу, в то время как кнопка “Далее” находится в правом нижнем углу. Это надежный способ исключить ошибки.
Конечно, кнопка “Назад” отличается от кнопки “Предыдущий шаг”, но часто при тестировании пользователи воспринимают их как похожие или, по крайней мере, выполняющие одно и то же действие. В общем, чем больше расстояние между двумя противоположными действиями
, тем меньше вероятность ошибки.
Предусмотрите возможность сохранения настроек
Как мы видели выше, иногда пользовательская кнопка “Назад” не нужна вовсе. Конечно, нам в любом случае нужно обеспечить привычное поведение кнопки браузера “Назад”, но вместо кастомной версии мы можем предоставить пользователям возможность возвращаться только к нужным опциям. Например, с помощью специальной области сохранения настроек
.
позволяет пользователям сохранять настройки в виде снапшотов.
На сайте Fender Mod Shop
вы можете создавать “снапшоты” в процессе настройки модели. Вы всегда будете двигаться вперед, но при этом иметь возможность вернуться к определенной версии, которую сохранили в специальном окне.
Подведем итоги
Пользователи воспринимают наши сайты иначе, чем мы. Чем сильнее меняется область просмотра, тем выше вероятность того, что пользователи примут ее за “ отдельную страницу
”. Люди полагаются на кнопку “Назад”, чтобы вернуться к предыдущему шагу, но поведение интерфейса часто не соответствует их ожиданиям, что приводит к разочарованию и отказу от дальнейшего взаимодействия.
Нам определенно нужно как минимум согласовать поведение кнопки “Назад” с ожиданиями пользователей
. Кроме того, было бы неплохо добавить в интерфейс кастомную кнопку “Назад” — и, возможно, разместить ее подальше от кнопок “Далее” или “Продолжить”, может быть, даже в верхней части страницы
.
Хотя в некоторых сценариях это работает очень хорошо, такое решение может не сработать для вас. В этом случае постарайтесь не располагать кнопки слишком близко друг к другу
и убедитесь, что они достаточно сильно различаются визуально. Одна может быть оформлена как ссылка, а другая — как кнопка. То, что кажется незначительной деталью, может окупиться с лихвой и привести к снижению количества отказов от покупки и повышению конверсии. А это того стоит.
Элементы управления браузером.
Названия основных элементов управления окном браузера, кнопки: домашняя страница, назад, следующий, обновить, минимизировать, увеличивать до предела, закрывать.
Голосовое произношение названий на английском языке, с картинками.
- home page
- – [] –
- домашняя страница
- back
- – [] –
- назад
Другие варианты перевода:
обратно
- next
- – [] –
- следующий
Другие варианты перевода:
ближайший, рядом, дальше, затем, около
- refresh
- – [] –
- обновить
- minimize
- – [] –
- минимизировать
Другие варианты перевода:
доводить до минимума, преуменьшать
- maximize
- – [] –
- увеличивать до предела
Другие варианты перевода:
максимизировать, увеличивать до крайности
- close
- – [] –
- закрывать
Другие варианты перевода:
близкий, близко, почти, закрытие, конец
В качестве глагола означает – Завершить или закончить какой нибуть процесс или работу
Что общественное место (магазин, ресторан и т.д)
или организация закрывается, прекращает работу.
В качестве прилагательного означает – Близко на расстоянии: близкий, расположенный недалеко.
Близко во времени: близкий, происходящий незадолго.
Если люди хорошо знают друг друга, очень любят друг друга или близкие родственники: Пример:
–
- Страницы:
- 2
- 4
- Популярные разделы сайта:
- Аудио-класс для веб-разработчиков
- Аудио-класс для дизайнеров
- Голосовое произношение слова и фраз IT тематики на английском
How to create a back button with a react-router?
Since the react-router
package has an internal history management API, we cannot use the default JavaScript History API.
To create a back button with the react-router
package, we need to:
- Add the hook to the component where you have the button.
- Call this hook’s result with a to go back one page (inside the button’s click event callback)
1. First, let’s add a React application with a few routes.
{ createRoot } ; { BrowserRouter, Routes, Route } ; Index = ; Contact = ; App = { ( );
}; rootElement = .getElementById(); root = createRoot(rootElement);
root.render( ); This application contains two routes: the index and the contact route.
2. Then, let’s create a navigation component that is going to enable us to navigate through the application:
Navigation = { navigate = useNavigate(); ( );
}; This component contains links to navigate between routes.
Also, it contains two buttons:
- The first one, when clicked, brings the history back.
- The second one, when clicked, brings the history forward.
3. Let’s combine everything!
{ createRoot } ; { BrowserRouter, Routes, Route, Link, useNavigate
} ; Index = ; Contact = ; Navigation = { navigate = useNavigate(); ( );
}; App = { ( );
}; rootElement = .getElementById(); root = createRoot(rootElement);
root.render(
); As you can see, those two buttons manipulate the history of the application.
Note:
If you want to go back or forward a few pages, you must put the number of pages inside the function.
Final thoughts
As you can see, manipulating the history of a React web application is simple with the react-router
package.
Вот некоторые другие Руководства по React
для вашего удовольствия:
Привет! Меня зовут Тим Мусхеличвили, независимый разработчик и консультант из Монреаля, Канада.
Я специализируюсь на разработке приложений React, Node.js и TypeScript.
Если вам нужна помощь в проекте, пожалуйста, обращайтесь, и давайте работать вместе.
