How to intercept browser back button / trackpad swipe in React and redirect to a specific route instead of history back

you should not intercept popstate directly when using React Router. It bypasses the router’s own history handling and leads to exactly the inconsistencies you’re seeing.

React Router already listens to popstate internally. The correct approach is to model the behavior through routing state and navigation rules, not low-level browser events.

If you want Back to always go to a specific route, Use explicit navigation control instead of the browser back button logic.

When navigating to the page:

navigate("/profile/edit", { state: { backTo: "/settings" } });

Then inside the page:

import { useLocation, useNavigate } from "react-router-dom"; function EditProfile() { const navigate = useNavigate(); const location = useLocation(); useEffect(() => { return () => { if (location.state?.backTo) { navigate(location.state.backTo, { replace: true }); } }; }, [location, navigate]); return <div>Edit Profile</div>; }

This keeps routing logic declarative and predictable. Popstate is mostly never used for navigation routing. Hope this helps :)

Don’t intercept popstate manually when using React Router. It’s an anti-pattern and conflicts with the router’s internal history handling.

Why popstate is the wrong approach

React Router already listens to popstate events internally.
Manually adding your own popstate listener:

Bypasses React Router’s navigation logic

Causes unexpected redirects

Breaks normal browser history behavior

Leads to inconsistent UX (exactly what you’re observing)

Because of this, intercepting browser back actions directly is not recommended when using React Router.