remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
30.17k stars 2.56k forks source link

Client side navigation stripping trailing slash from href's #10248

Open njdancer opened 1 week ago

njdancer commented 1 week ago

Reproduction

We just finished updating our application from Remix 2.9.2 to 2.14.0. After this we have noticed that Link's that are provided an href with a trailing slash will incorrectly strip this trailing slash from the url before it reaches the loader.

Our specific use-case is for a CMS backed application. The CMS will resolve the page regardless of the trailing slash but to ensure consistency, when we detect a discrepancy we will always redirect the user to the path used by the CMS. This has worked flawlessly up until this upgrade. We now find that on the initial SSR the url is passed through unmodified and the page is rendered correctly. However, if we try to perform a client side navigation, the data route requested by remix has this trailing slash removed. This then results in the redirect logic running however when Remix tries to process the redirect it again strips the trailing slash entering into a redirect loop.

I have created a very simplified reproduction here. https://stackblitz.com/edit/remix-run-remix-3bxkfe

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 76.55 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 4.1.1 - ~/.nvm/versions/node/v20.18.0/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.70
    Safari: 17.4.1
  npmPackages:
    @remix-run/cloudflare: ^2.14.0 => 2.14.0 
    @remix-run/cloudflare-pages: ^2.14.0 => 2.14.0 
    @remix-run/dev: ^2.14.0 => 2.14.0 
    @remix-run/react: ^2.14.0 => 2.14.0 
    @remix-run/testing: ^2.14.0 => 2.14.0 
    vite: ^5.4.10 => 5.4.10

Used Package Manager

yarn

Expected Behavior

Create a Link tag with a trailing slash e.g. <Link to="/trailing/"> Update corresponding loader to log request url Performing client side navigation with Link should result in /trailing/ being logged.

Actual Behavior

Create a Link tag with a trailing slash e.g. <Link to="/trailing/"> Update corresponding loader to log request url Performing client side navigation with Link results in /trailing being logged.

njdancer commented 1 week ago

Have just found that this was intentionally changed in #9792. Can I understand why this was changed and whether there may be a way to workaround this? Right now I’m using request.url to check the url but perhaps there is another way I can get this that is not affected.