Как перехватить кнопку возврата браузера / пролистывание трекпада в React и перенаправить на определенный маршрут вместо ⇐ Javascript

[Anonymous]

Я создаю приложение React с маршрутизацией на стороне клиента.

Когда пользователь перемещается по нескольким страницам, а затем использует кнопку «Назад» в браузере (или жест обратного пролистывания мышью/трекпадом), приложение шаг за шагом возвращается назад по истории.
Чего я хочу
Вместо того, чтобы возвращаться на один шаг назад в истории, я хочу, чтобы пользователь перенаправлялся на определенный маршрут (например, /settings) всякий раз, когда он запускает действие возврата браузера.
Пример сценария

• /home → /profile → /profile/edit
• Пользователь нажимает кнопку браузера назад (кнопка мыши/пролистывание)
• Ожидается: перенаправление в /settings
• Фактическое: возвращается в /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