Когда пользователь перемещается по нескольким страницам, а затем использует кнопку браузера «Назад» (или жест смахивания назад мышью или трекпадом), приложение шаг за шагом возвращается назад по истории.
Чего я хочу
Вместо того, чтобы возвращаться на один шаг назад в истории, я хочу, чтобы пользователь перенаправлялся на определенный маршрут (например, /settings) всякий раз, когда он запускает браузер обратно действие.
Пример сценария
1. /home → /profile → /profile/edit
2. Пользователь нажимает кнопку браузера назад (кнопка мыши/пролистывание)
3. Ожидается: перенаправление на /settings
4. Фактически: возвращается в /profile
Упрощенный пример
Код: Выделить всё
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
function Page() {
const navigate = useNavigate();
useEffect(() => {
const handlePopState = () => {
navigate("/settings", { replace: true });
};
window.addEventListener("popstate", handlePopState);
return () => {
window.removeEventListener("popstate", handlePopState);
};
}, [navigate]);
return Page;
}
• Это может вызвать непредвиденную навигацию
• Это мешает нормальному поведению истории браузера
Вопросы
• Как правильно обрабатывать кнопку «Назад» браузера (включая жесты мыши/трекпада) в React?
• Является ли перехват popstate правильным подходом?
• Как это следует реализовать? правильно с React Router?
Подробнее здесь: https://stackoverflow.com/questions/798 ... irect-to-a
