encoded character in url causes "Initial URL does not match URL at time of hydration"

[WillSmithTE]

Reproduction

https://github.com/WillSmithTE/grunge-test-2

https://19przkzqw9.execute-api.us-west-2.amazonaws.com

1. open the app above
2. open the whistler blog
3. infinite refresh because "Initial URL does not match URL at time of hydration"

This is deployed with the grunge stack on lambda, and the whistler blog title (and url) has an encoded character, "," (or "%2C")

in the html, this is the remix context, note the "decoded" comma

<script>
            window.__remixContext = {
                "url": "/blog/Good%20day%20at%20Whistler,%20but%20a%20bit%20icy",
                "state": {
                    "loaderData": {
                        "root": {
                            "user": null
                        },
                        "routes/blog.$title": {
                            "blog": {
                                "id": "a",
                                "title": "Good day at Whistler, but a bit icy"
                            }
                        }
                    },
                    "actionData": null,
                    "errors": null
                },
                "future": {
                    "v3_fetcherPersist": false,
                    "v3_relativeSplatPath": false,
                    "v3_throwAbortReason": false
                }
            };
        </script>
        ```


https://github.com/remix-run/remix/assets/26863411/091a8e6d-cd1e-4a07-9727-bcddb5e449be



### System Info

```shell
System:
    OS: macOS 14.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 130.39 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    Watchman: 2023.12.04.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 121.1.62.153
    Chrome: 121.0.6167.184
    Safari: 17.1
  npmPackages:
    @remix-run/architect: ^2.7.2 => 2.7.2 
    @remix-run/css-bundle: ^2.7.2 => 2.7.2 
    @remix-run/dev: ^2.7.2 => 2.7.2 
    @remix-run/node: ^2.7.2 => 2.7.2 
    @remix-run/react: ^2.7.2 => 2.7.2 
    vite: ^5.0.0 => 5.1.4

Used Package Manager

npm

Expected Behavior

Page loads normally

Actual Behavior

Page infinitely refreshes cause of the mismatch between encoded and decoded comma

[brophdawg11]

Hm, maybe we need to be decoding these before the comparison?

decodeURIComponent(window.location.pathname) === decodeURIComponent("/blog/Good%20day%20at%20Whistler,%20but%20a%20bit%20icy")
// true

I'm slightly surprised the server Request url and browser URL differ on the comma - might need to dig into why those are behaving differently

[brophdawg11]

I'm also curious if this behaves the same on an Express server, or if this is something specific to how AWS lambda encodes URLs

[martinmckenna]

came here to post this. took a look at my analyics today and saw someone was visiting mysite.com/route%2F and got curious and visited myself and saw my site infinitely reloading

hoping this one is fixed soon!

e: i'm using the default remix server running on a linux VPS, fwiw, so i don't think it's an AWS thing

[brophdawg11]

This should be resolved via #9695 and available in the next release 👍

[github-actions[bot]]

🤖 Hello there,

We just published version 2.11.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[WillSmithTE]

confirmed good on 2.11.0, thanks!

[github-actions[bot]]

🤖 Hello there,

We just published version 2.11.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[brophdawg11]

We had to revert the fix in https://github.com/remix-run/remix/pull/9695 so re-opening this. We should be able to remove this check entirely instead in https://github.com/remix-run/remix/pull/9890