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

Question

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?

XMDCode · Accepted Answer · 2025-07-08 17:22:38Z

0

I assume that is the root layout of your pages.

<header>
</header
<main>
<Outlet/>
</main>

<footer>
</footer>

If you change the language from language selector using i18n it should change the locale and you should add the following in this page so it should revalidate the loaders and give you the new values with the locale you have added.

https://remix.run/docs/en/main/route/should-revalidate

For example if you do post and stay in the same page you should use

export function shouldRevalidate({
  currentUrl,
  nextUrl,
}) {
  if (currenturl!==nextUrl) {
    return false;
  }
  return true;
}

This revalidates the loader so it should give you the new locale.

Also use https://remix.run/resources/remix-flat-routes if you use locales it makes your life WAY easier.

answered Jul 8 at 17:22

XMDCode

513 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related