[Bug]: useBlocker not prevent fetcher submits

[abustany]

What version of React Router are you using?

6.22.3

Steps to Reproduce

1. Open https://stackblitz.com/edit/github-wxm49t?file=src%2Fapp.tsx
2. Click the Go button

(note: I added a beforeunload handler to make 100% sure the issue is not linked to client vs. "real" navigation)

Expected Behavior

useBlocker prevents the fetcher from submitting

Actual Behavior

fetcher.submit() navigates way, potentially losing unsaved data on the page

[brophdawg11]

This is intended - useBlocker prevents navigations and fetchers are explicitly not navigations. What you're seeing is the bubbling of a 404 on the fetcher call to the Error Boundary, and since you haven't specified one it's using the default which is blowing away your UI so it "feels" like it navigates elsewhere but it remains on / the whole time.

Here's an example of using an ErrorBoundary to capture those errors contextually in the UI: https://stackblitz.com/edit/github-wxm49t-jdqbwf

[abustany]

Thanks for the detailed answer! My use case involves not a 404 but the loader returning a redirect, should that also be captured using an error boundary then?