Как настроить функцию 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: Гарантируйте удобное возвращение на предыдущую страницу, если пользователь попал на страницу с ошибкой.

Полезные материалы

1. MDN Web Docs о History API — подробнейшее руководство о истории браузера.
2. GitHub – remix-run/history: Управление историей сессии на JavaScript — исходный код для детального понимания работы с историей.
3. Обучающее видео о хуке useHistory в React Router — практический видеоматериал для освоения работы с useHistory.
4. Применение хука Effect – React — пособие по использованию хука useEffect.
5. Обсуждение программной навигации в React на Stack Overflow — дискуссия между исполнительными программистами о навигации в React.