fix(hydrogen): storefrontRedirect now works with Single Fetch client-side navigations#3762
Merged
Merged
Conversation
…side navigations
React Router v7's Single Fetch protocol changed how client-side data
requests are made: from `?_data=route/id` query params to a `.data`
pathname suffix. `storefrontRedirect` was checking `searchParams.has('_data')`
which no longer matches, causing all client-side navigations to redirected
URLs to silently fail with 404s instead of following the redirect.
Key changes:
- Detect soft navigations via `.data` pathname suffix instead of `_data` query param
- Handle all three React Router Single Fetch URL patterns:
`/page.data` (standard), `/_root.data` (root route), `/page/_.data` (trailing-slash-aware)
- Return HTTP 204 (not 200) for soft navigation redirect responses, matching
what React Router's turbo-stream protocol expects
- Strip `_routes` query param (replaces `_data`) before SFAPI redirect lookup
- Add e2e Playwright tests with MSW for both full-page and client-side redirect flows
Fixes #3738
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
andguy95
approved these changes
May 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fixes #3738
React Router v7's Single Fetch protocol changed how client-side data requests are made: from
?_data=route/idquery params to a.datapathname suffix (e.g./old-page.data).storefrontRedirectwas checkingsearchParams.has('_data')which no longer matches, causing all client-side navigations to redirected URLs to silently return 404s instead of following the redirect. Full-page navigations were unaffected.WHAT is this pull request doing?
Detects Single Fetch soft navigations via the
.datapathname suffix, strips it to recover the real pathname, and returns the correct204+X-Remix-Redirectheaders that React Router's turbo-stream protocol expects.Handles all three URL patterns that React Router's
singleFetchUrlproduces:/page.data— standard/_root.data— root route (non-trailing-slash-aware)/page/_.data— trailing-slash-awareAlso strips the
_routesquery param (replaces_datafrom the old protocol) before the SFAPI redirect lookup.HOW to test your changes?
/old-page→/new-page) in Shopify admin/old-page— should 301 redirect (this already worked)/old-page— should now redirect via client-side navigation (this was broken)Or run the new tests:
Checklist