Remix动态路由($locale).jsx相关路由问题咨询

问题背景 #

在Remix应用开发国家选择器时，切换US/SG地区后购物车未同步更新买家CountryCode，添加商品时前端乐观更新成功但服务器因CountryCode不匹配拒绝请求。使用的表单代码如下：

<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>

原本预期提交到/locale会触发($locale).jsx的action，但实际未触发，创建独立locale.jsx报错，($locale).jsx中console.log无输出，现针对以下问题逐一解答：

问题1：动态路由文件($locale).jsx对应的预期URL路径是什么？例如访问/us或/sg时，该文件是否会处理这些路由，params.locale是否会被设为"us"或"sg"？ #

($locale).jsx是Remix的可选动态分段路由，对应的路径包括：

• 根路径/（此时params.locale为undefined）
• 根路径下的任意单段路径，比如/us、/sg、/cn
  访问/us时params.locale会被设为"us"，访问/sg时则为"sg"，这类带单段参数的路径都会被该文件处理。

问题2：括号对路由有何影响？$locale.jsx与($locale).jsx命名有区别吗？括号是否代表特殊的URL结构分组或行为？ #

在Remix路由规则里，括号()的作用是标记可选的动态路由分段，两者的核心区别如下：

• ($locale).jsx：动态分段是可选的，根路径/以及/us、/sg这类带单段参数的路径都会匹配该文件，根路径下params.locale为undefined
• $locale.jsx：动态分段是必填的，只有/us、/sg这类带单段参数的路径才会匹配，根路径/不会触发该路由文件

简单来说，括号让这个动态分段变成非必须存在的，不带括号则要求路径里必须有该分段才能匹配。

问题3：为何表单action设为/locale无法触发($locale).jsx中的action？是否意味着/locale不匹配该文件？应改用其他URL还是创建独立的locale.jsx文件处理地区切换？ #

是的，/locale路径完全不匹配($locale).jsx——因为($locale).jsx匹配的是/[任意单段内容]，而/locale是固定的分段名称，不会被识别为动态参数$locale，自然无法触发该文件的action。

有两种可行的解决方式：

• 方式一：复用动态路由
  修改表单的action为对应地区的动态路径，比如切换到美国时设为/us，切换到新加坡时设为/sg；同时在($locale).jsx中导出action函数，接收请求后更新买家的CountryCode，最后利用表单里的path参数跳转到用户原来的页面。
• 方式二：创建独立路由文件
  在app/routes目录下创建locale.jsx文件（确保路径正确），在该文件中导出处理地区切换的action函数，表单保持action="/locale"即可。之前创建文件报错大概率是文件位置不对或action导出逻辑有误，检查文件是否在正确的routes目录下，且action函数正确导出。

内容的提问来源于stack exchange，提问作者matrixvivi