Remix Run提交action报root路由无action 405错误排查

报错提示提交到root路由找不到action，本质是你写的Form提交路径/products没有匹配到对应的带action的路由，请求 fallback 到根路由后找不到POST处理逻辑，返回405状态码。

常见触发场景 #

• action存放的文件位置不对
• Form填写的action路径和实际项目路由不匹配
• action导出写法错误导致Remix构建时未识别

1. 确认action存放位置
   Remix仅会识别app/routes目录下、和URL路径严格对应的路由文件中顶层导出的action/loader。你写的action如果放在Aside这类普通组件文件里、或者放在组件函数内部、或者放在不对应/products路径的其他路由文件里，Remix路由层完全读取不到。
   你需要把贴出来的action代码，移动到/products路径对应的路由文件（通常是app/routes/products.tsx，如果用新版flat路由则对应符合命名规范的products路由文件）的顶层作用域，和路由默认导出组件同层级。

注意：哪怕你把Form组件抽离到全局Aside、布局组件里复用，action逻辑也必须放在提交路径对应的路由文件中，不能跟着组件走。

2. 校验路径有效性
   本地启动服务后直接访问http://localhost:服务端口/products，确认页面能正常渲染、不报404。如果路径本身404，说明路由文件命名不符合Remix路由规范，Form提交到不存在的地址自然会 fallback 到根路由。
   同时检查路径拼写：Remix路由匹配大小写敏感，不要出现/Products和/products这类拼写偏差，不要多写冗余斜杠。
3. 检查导出写法
   确保action没有拼写错误（比如不要把action拼成acton/Action），类型导入要加type关键字避免运行时异常，参考正确写法：

// app/routes/products.tsx
import type { ActionFunction } from "@remix-run/node";
// 不要省略type关键字，否则构建时可能出现导出异常

export const action: ActionFunction = async ({request}) => {
  const formData = await request.formData()
  const id = formData.getAll('id')
  const quantity = formData.getAll('quantity')
  const newObj = id.map((data, index) => ({ variantId: data, quantity: quantity[index] }))
  return await createCheckout(newObj)
}

// 路由文件必须有默认导出的路由组件
export default function ProductsPage() {
  return <div>产品页内容</div>
}

4. 快速验证方法
   可以临时把Form的action='/products'属性删掉，Remix默认会提交到当前渲染的路由，在当前路由文件里加上测试action，如果能正常触发，就完全确认是之前的路径匹配、文件位置问题，按前面的步骤调整即可。

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