Using a React <Form> with a URL hash "#" value causes browser Warning that Prop action did not match

[davebednarski]

What version of Remix are you using?

1.19.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Repro:

1. Go to the base Remix Stackblitz which I've added only a Form tag with an input in _index file.
   1.1 https://stackblitz.com/edit/remix-run-remix-yh7bnh?file=app%2Froutes%2F_index.tsx
2. Open browser console for the loaded app.
3. Add to the end of app URL the string "?test=123#aaa" and hit your "Enter" key.
   3.1 Example: https://remixrunremixyh7bnh-an32--3000--bec01ace.local-credentialless.webcontainer.io?asdf=123#aaa
4. Refresh the window to simulate a page reload by clicking the refresh icon.
5. Observer the browser console

Error:

Expected Behavior

No console error on a page refresh if there is a hash value in the URL.

Actual Behavior

Browser console error = Warning: Prop action did not match. Server: "/?index&asdf=123" Client: "/?index&asdf=123#aaa"

[mikeybinns]

I also have this issue

[brophdawg11]

For now you can workaround this by specifying the action without the hash:

let location = useLocation();
return <Form action={location.pathname + location.search}>...</Form>

[brophdawg11]

This is resolved by remix-run/react-router#10758 and should be available in Remix v2