So fangen Sie das Wischen der Browser-Zurück-Taste/Trackpad in React ab und leiten zu einer bestimmten Route statt zum V ⇐ JavaScript

[Anonymous]

Ich erstelle eine React-Anwendung mit clientseitigem Routing.

Wenn der Benutzer durch mehrere Seiten navigiert und dann die Zurück-Schaltfläche des Browsers (oder die Zurück-Wischgeste mit Maus/Trackpad) verwendet, bewegt sich die App Schritt für Schritt durch den Verlauf zurück.
Was ich möchte
Anstatt einen Schritt im Verlauf zurückzugehen, möchte ich, dass der Benutzer zu einer bestimmten Route (z. B. /Einstellungen) umgeleitet wird, wenn er einen Browser-Zurück auslöst Aktion.
Beispielszenario

• /home → /profile → /profile/edit
• Benutzer drückt Browser zurück (Maustaste/Wischen)
• Erwartet: Weiterleitung zu /settings
• Tatsächlich: Geht zurück zu /profile

Vereinfachtes Beispiel

Code: Select all

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;
}

Dies funktioniert teilweise, aber:

• Es kann zu unerwarteter Navigation führen
• Es stört das normale Verhalten des Browserverlaufs

Fragen

• Wie wird die Browser-Zurück-Schaltfläche (einschließlich Maus-/Trackpad-Gesten) in React richtig gehandhabt?
• Fängt Popstate ab der richtige Ansatz?
• Wie soll das mit React Router richtig umgesetzt werden?