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

[Anonymous]

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

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

Чего я хочу

Вместо того, чтобы возвращаться на один шаг назад в истории, я хочу, чтобы пользователь перенаправлялся на определенный маршрут (например, /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