Has the v5 Prompt component issue been fixed in later versions?

[bdrazen]

Specifically the issue related to manual URL changes: #6830

[MILLERMARRU]

I checked #6830 and it's closed, but not because it got fixed, the underlying limitation is still there in the current useBlocker/unstable_usePrompt stack. pshrmn's explanation from back then still holds: typing a new URL into the address bar and hitting enter is a full document navigation, not a client-side history.pushState transition. The browser sends a real request, gets a real response, and unloads the current document to load the new one. React Router's blocking mechanism, whether it's the old v5 Prompt, or useBlocker/unstable_usePrompt today, only intercepts transitions that go through the SPA's own history stack. I confirmed this against the current useBlocker docs, which say it explicitly: "This does not handle hard-reloads or cross-origin navigations." A manually typed address bar URL is exactly a hard reload from the browser's perspective, so there's nothing in useBlocker/usePrompt for it to hook into.

The only thing you can hook for that specific case is the native beforeunload event:

useEffect(() => {
  const handler = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      e.returnValue = ''; // required by Chrome
    }
  };
  window.addEventListener('beforeunload', handler);
  return () => window.removeEventListener('beforeunload', handler);
}, [hasUnsavedChanges]);

Worth knowing going in: modern browsers ignore any custom message you set (Chrome hasn't shown a custom string in beforeunload dialogs since around 2017), you just get the browser's generic "changes you made may not be saved" prompt. There's no way to customize it, and no way to distinguish "typed a new URL" from "closed the tab" from beforeunload alone, they both fire the same event. So the pattern is: useBlocker/unstable_usePrompt for in-app SPA navigation (real custom dialog), plus beforeunload for hard navigations/tab close (browser's native one only). That's the same two-tier approach the closed issue's own thread landed on years ago, it just hasn't changed since, because it can't, this is a browser security boundary, not something React Router chooses not to implement.