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

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 ( ); };Объяснение:Если isDirty равно true, попытка смены маршрута вызывает подтверждение.При согласии переход продолжается.Важно: В последних версиях React Router рекомендуется использовать useNavigate для управления программными редиректами, но useBlocker остается полезным для подтверждений.