Как настроить функцию goBack() в React-router: история маршрута
Быстрый ответ
Для перехода на предыдущую страницу применяется хук useHistory
от программного пакета React Router, с использованием метода history.goBack()
.
import { useHistory } from 'react-router-dom';
function GoBackButton() {
const history = useHistory();
return <button onClick={() => history.goBack()}>Назад</button>;
}
После нажатия на кнопку Назад вы тут же вернётесь на предыдущую страницу.
Перехвод к использованию useHistory в более новых версиях
В последних версиях React Router, начиная с версии 6, рекомендуется использовать useNavigate
вместо useHistory
.
import { useNavigate } from 'react-router-dom';
function GoBackButton() {
const navigate = useNavigate();
return <button onClick={() => navigate(-1)}>Назад</button>;
}
В контексте одностраничных приложений метод navigate(-1)
эмулирует поведение метода history.goBack()
, что упрощает навигацию по истории браузера.
Навигация в классовых компонентах
Если вы продолжаете работать с классовыми компонентами и до сих пор не используете хуки, то доступ к истории можно предоставить с помощью компонента высшего порядка withRouter
:
import React from 'react';
import { withRouter } from 'react-router-dom';
class GoBackButton extends React.Component {
render() {
const { history } = this.props;
return <button onClick={() => history.goBack()}>Назад</button>;
}
}
export default withRouter(GoBackButton);
withRouter позволяет иметь прямой доступ к объекту history в классовом компоненте.
Обработка прямого доступа к маршруту
Бывают случаи, когда пользователь попадает на страницу напрямую, через закладку или ссылку. В таких обстоятельствах нажатие на кнопку Назад перенаправит их непосредственно на страницу, с которой они приходит. Важно предусмотреть альтернативный маршрут:
function safeGoBack(defaultPath) {
if (history.length > 1) {
history.goBack();
} else {
history.push(defaultPath);
}
}
Проверка состояния истории
Всегда следите за состоянием истории, особенно в ситуациях, когда используются iframe и история может быть модифицирована или отсутствовать вовсе.
Совместимость с React Suspense
Если вы планируете использовать React Suspense или Concurrent Mode, убедитесь, что ваше взаимодействие с историей не конфликтует с асинхронной работой этих механизмов. К навигационным действиям необходимо относиться как к побочным эффектам.
Применение синтаксиса ES6 и default экспортов
Пользуйтесь синтаксисом ES6 для более чёткого и понятного кода. Также практикуйте default экспорты, там где это целесообразно.
export default function GoBackButton() { /* ... */ }
Визуализация
Навигация по сайту аналогична перелистыванию страниц книги:
Текущая страница: 📄
Ранее: [📄1, **📄2**, 📄3] – Вы на странице 2.
С помощью объекта истории в React Router мы можем вернуться на одну страницу назад:
history.goBack();
Перелистывание назад:
После: [**📄1**, 📄2, 📄3] – Вы вернулись на страницу 1. Это своего рода путешествие во времени, не правда ли?
Объект истории – ваш личный билет в клуб путешественников во времени.
Создаем UX-достижение с помощью кнопки истории навигации
Создание понятной кнопки возврата «Назад» с чёткой навигацией по истории значительно улучшит пользовательский опыт. Это некий аналог цифровых крошек хлеба для пользователя.
- Выделение кнопки: Привлекайте внимание к важным элементам интерфейса, например, при наведении курсора.
- Использование всплывающих подсказок: Информируйте пользователя о действии кнопки со строкой
"Вернуться на предыдущую страницу"
. - Доступность кнопки: Регулируйте доступность кнопки в зависимости от состояния истории, чтобы она была неактивна, когда возврат на предыдущую страницу невозможен.
Продвинутые приёмы с шаблонами React Router
Воспользуйтесь шаблонами React Router для удобного управления навигацией:
- Вложенные маршруты: Используйте относительную навигацию в сложных сценариях с вложенными маршрутами.
- Защитный функционал: Примените защиту от нежелательных возвратов на страницы, требующие авторизации.
- Кастомные хуки: Если ставите высокую ценность на возможность переиспользования, создавайте собственные хуки, например,
useBackNavigation
.
Хитрые детали (или редкие случаи)
- Выявление конца истории: Используйте
history.length
для определения, когда следует отображать кнопку возврата. - Оставаться на месте: Избегайте нежелательного перемещения пользователя с текущей страницы методом
event.preventDefault()
. - Обработка ошибок 404: Гарантируйте удобное возвращение на предыдущую страницу, если пользователь попал на страницу с ошибкой.
Полезные материалы
- MDN Web Docs о History API — подробнейшее руководство о истории браузера.
- GitHub – remix-run/history: Управление историей сессии на JavaScript — исходный код для детального понимания работы с историей.
- Обучающее видео о хуке useHistory в React Router — практический видеоматериал для освоения работы с useHistory.
- Применение хука Effect – React — пособие по использованию хука
useEffect
. - Обсуждение программной навигации в React на Stack Overflow — дискуссия между исполнительными программистами о навигации в React.