React Router前缀拼接Rails路由导致PATCH请求路由错误如何解决

这个路径拼接错误和React Router配置、Rails fallback路由配置没有关系，核心原因是fetch请求使用了相对路径，浏览器会基于当前页面的URL做相对路径解析。
你当前所在的React页面路径为/edit/:id，此时写不带前导斜杠的请求地址api/organizations/${selectedOrg.id}，浏览器会默认将请求路径拼接在当前路径层级下，最终生成的请求地址就是报错日志里的/edit/api/organizations/1。

• 即时修复：给请求路径添加站点根路径前导斜杠，强制浏览器从域名根目录解析路由，将fetch代码修改为：

fetch(`/api/organizations/${selectedOrg.id}`, {
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({name, hourly_rate: hourlyRate})
})

注意：不带开头/的路径永远是相对路径，会随当前页面路径变化拼接结果，只要是调用站点根层级下的接口，都建议以/开头写绝对路径。

• 长期优化：如果项目中接口统一归属于/api命名空间，可以统一封装前端请求方法，固定请求baseURL为/api，后续写接口路径时不需要反复考虑路径拼接问题，也能减少跨环境部署时的路径错误。

你之前写的Rails fallback路由配置没有问题，规则只匹配非异步请求、HTML格式的GET请求，不会拦截PATCH类型的API接口，不需要调整。

内容的提问来源于stack exchange，提问作者Erin Martin-Rose