Как вы можете получить доступ к объекту истории в React Router?

В React Router доступ к объекту истории обеспечивается через useHistory() или useNavigate(). useHistory() предоставляет доступ к объекту истории, который позволяет изменять текущий маршрут, например, с помощью методов push() для добавления нового маршрута или goBack() для возврата на предыдущую страницу. useNavigate() работает аналогично, но возвращает функцию для манипуляции маршрутом. Эти инструменты позволяют создавать динамичные и пользовательско-ориентированные приложения, которые обеспечивают плавное и интуитивно понятное взаимодействие с пользователем. Примером может служить создание кнопки "Назад" на странице профиля, которая использует goBack() для возврата на предыдущую страницу.

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

function SomeComponent() {
  const history = useHistory();

  const navigateToProfile = () => {
    history.push('/profile/1');
  };

  return <button onClick={navigateToProfile}>Перейти к профилю</button>;
}

useNavigate() работает аналогично, но возвращает функцию для программного изменения маршрута:

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

function SomeComponent() {
  const navigate = useNavigate();

  const navigateToProfile = () => {
    navigate('/profile/1');
  };

  return <button onClick={navigateToProfile}>Перейти к профилю</button>;
}