从子路由提交的父路由上的 ActionLoader 函数重定向回父路由

【问题标题】：ActionLoader function on parent route submitted from child route redirects back to parent route从子路由提交的父路由上的 ActionLoader 函数重定向回父路由
【发布时间】：2022-06-15 22:09:19
【问题描述】：

所以我正在努力解决一些我确信有一个我错过的优雅解决方案的事情。我有一个嵌套路由系统，其中父 /data/streams（绿色）有一个项目列表，其中包含操作表单以及操作加载器所在的位置。但是，这些可以从子路由/data/streams/$streamId（紫色）提交。一切正常，除非用户在子路由上，否则他们会被重定向回父路由。我可以用redirect 解决这个问题，并将当前位置嵌入到小暂停表单中，但是当呼叫失败时我不能使用useActionData 来显示错误通知。

【问题讨论】：

标签： remix.run

【解决方案1】：

Remix 将<Form> 提交视为导航（标准浏览器功能）。这就是您的子路由 POST 导航到父路由的原因（因为那是您要发布到的位置）。

Remix 还支持非导航（标准提取）的表单提交。为此，请使用<fetcher.Form>。注意：从操作返回的数据在fetcher.data 上可用。还要检查 fetcher.state 和 fetcher.submission 来处理乐观 UI。

const fetcher = useFetcher()
return <fetcher.Form method="post" action="/data/streams">

https://remix.run/docs/en/v1/api/remix#usefetcher

【讨论】：