Как перехватить попытку смены маршрута (например, для отображения подтверждения)?

Question

Для перехвата попытки смены маршрута в React Router используется хук usePrompt (или useBlocker в React Router 6), который позволяет отобразить подтверждение или выполнить логику перед сменой пути.

YeaHub · Accepted Answer

Перехват попыток смены маршрута можно реализовать следующим образом:

Использование хука useBlocker:

import { useBlocker } from 'react-router-dom';
const useUnsavedChangesPrompt = (shouldBlock) => {
	useBlocker(({ retry }) => {
		if (window.confirm("У вас есть несохраненные изменения. Покинуть страницу?")) {
			retry(); // Продолжить переход
		}
	}, shouldBlock);
};

Пример использования:

const FormPage = () => {
	const [isDirty, setIsDirty] = useState(false);
	useUnsavedChangesPrompt(isDirty);
	const handleInputChange = () => setIsDirty(true);
	return (
		<form>
			<input onChange={handleInputChange} />
			<button type="submit" onClick={() => setIsDirty(false)}>Сохранить</button>
		</form>
	);
};

Объяснение:

Если isDirty равно true, попытка смены маршрута вызывает подтверждение.
При согласии переход продолжается.

Важно: В последних версиях React Router рекомендуется использовать useNavigate для управления программными редиректами, но useBlocker остается полезным для подтверждений.

Как перехватить попытку смены маршрута (например, для отображения подтверждения)?

Короткий ответ

Длинный ответ

Как перехватить попытку смены маршрута (например, для отображения подтверждения)?

Короткий ответ

Длинный ответ