useHistory – REACT ROUTER

useHistory
Жизненный цикл рендеринга React:

1. Компонент Redirect должен быть возвращен
2. Затем происходит рендеринг перенаправления
3. URL обновляется
4. И, наконец, отрисовывается соответствующий маршрут.

React Router также предоставляет механизм для обязательного обновления местоположения браузера: объект истории Router, который доступен через хук useHistory().

import { useHistory } from 'react-router-dom';

Объект истории, который возвращает useHistory(), имеет ряд методов для императивного перенаправления пользователей. Первым и наиболее простым является history.push(location), который перенаправляет пользователя в указанное место.

Рассмотрим этот пример, который немедленно запускает перенаправление обратно на страницу / после того, как пользователь успешно отправляет запрос

:

import { useHistory } from `react-router-dom`

export const ExampleForm = () => {

  const history = useHistory()

  const handleSubmit = e => {
    e.preventDefault();
    history.push('/')
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* form elements */ }
    </form>
  )
}

Включая императивное обновление местоположения браузера, объект history позволяет вам немедленно реагировать на ввод пользователя без необходимости ждать.

Возможно, вам интересно, как работает объект history. Внутри объект истории BrowserRouter использует API истории html5.

Вкратце, история браузера – это стек, который хранит URL, посещенные пользователем, и поддерживает указатель на текущее местоположение пользователя. Этот API истории позволяет перемещаться по истории сеансов пользователя и при необходимости изменять стек истории.

Помимо history.push(), объект history имеет еще несколько полезных методов для навигации по истории браузера:

history.goBack(), который переходит к предыдущему URL в стеке истории.

Ниже показано, как метод .goBack() используется для создания кнопки “Вернуться назад”:

import { useHistory } from `react-router-dom`

export const BackButton = () => {
  const history = useHistory()

  return (
    <button onClick={() => history.goBack()}>
      Go Back
    </button>
  )
}