CODEWITHSUNDEEP
shopifyremix.runshopify-hydrogen
matrixvivi
matrixvivi

Reputation: 1

What is the URL path for a dynamic route file named ($locale).jsx in Remix?

I'm building a country selector in my Remix application. When I switch regions from US to SG or vice versa, however, the cart doesn't seem to update the buyer Identity with the change in country (the CountryCode and the previous contents of the cart don't change). As a result, the product added to cart successfully sends an optimistic update (POST) that sends the item added to cart to the server, but the server rejects, presumably because there is a mismatch in the CountryCode of the item, and the CountryCode of the buyer. My setup includes a component in a CountrySelector.jsx file with the following code:

<Form method="post" action="/locale" key={hreflang}>
  <input type="hidden" name="language" value={locale.language} />
  <input type="hidden" name="country" value={locale.country} />
  <input type="hidden" name="path" value={`${strippedPathname}${search}`} />
  <button type="submit">{locale.country}</button>
</Form>

I expected that when the form is submitted to /locale, the action in my dynamic route file ($locale).jsx would be triggered. However, it doesn't seem to be calling that action. This leads me to believe that the URL path /locale does not correspond to ($locale).jsx.

I have tried creating a dedicated locale.jsx file with the same contents as ($locale).jsx, but it seems to error. When I try console.logging in the ($locale).jsx and add a product to cart, it doesn't appear in the console.

I have the following questions:

What is the expected URL path for a dynamic route file named ($locale).jsx in Remix? For example, if I navigate to /us or /sg, will this file handle those routes, and will params.locale then be set to "us" or "sg"?

How do the parentheses affect the routing? Is there any difference between naming a file $locale.jsx versus ($locale).jsx? Does the presence of parentheses imply any special grouping or behavior in the URL structure?

Why isn't my form action /locale triggering the action in ($locale).jsx? It appears that when I submit the form with action /locale, Remix doesn't invoke the loader/action defined in ($locale).jsx. Does this mean that /locale is not matched to that file? Should I be using a different URL for the form action, or should I create a dedicated locale.jsx file for handling locale changes?

Upvotes: 0

Views: 16

Answers (0)

Related Questions