Как вы можете получить доступ к объекту истории в 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>;
}