Fix 404 URLs on path-based i18n projects #1732
Merged
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?
Hydrogen offers merchants the ability to easily set up localized paths for new projects. This means the active country and language code are in a path prefix. For example, a product page exists at
/fr-ca/products/hydrogen
. The locale prefix is optional, so/products/hydrogen
also exists, where a default locale is used. The way to configure this in Remix is with optional route segments. Hydrogen generates a route file named:($locale).products.$productHandle.tsx
.This works well until the user goes to an unknown route. In this case, the app needs to return a 404 response. Each of the following routes need to generate a 404:
The problem is that, even though neither route exists, both routes still match for Remix. This is because ($locale) is an optional segment, and the index route and products route both match and render at each route respectively.
The fix is to add a pathless route
($locale).tsx
that includes logic to throw a 404.WHAT is this pull request doing?
($locale).tsx
pathless route.HOW to test your changes?
Test the following routes:
Test each of these routes on both the demo store and a newly generated starter template. Do not test inside the skeleton template directly (because it doesn't have i18n configured). Instead, generate a new project with
h2 init
at the root of the repo.Also verify:
($locale).jsx
is generated for JS projects($locale).tsx
is generated for TS projects($locale).tsx
is generated for non-path-based i18n projectsPost-merge steps
Checklist