父路由ActionLoader被子路由提交后重定向回父路由问题求助

这个问题没有什么玄学，完全是React Router（含Remix、React Router v7）的路由action运行规则导致的：

• 你把action定义在父路由/data/streams下，向这个地址提交表单时，框架默认会在action执行完成后，导航到action所属的父路由路径，这就是你不加处理时自动跳回父页的原因
• 你在父路由action里读取当前路径手动redirect回子路由时，返回给前端的是3xx重定向响应，不是action执行的结果/错误数据。重定向会触发全新的路由加载流程，上一轮action的返回值会被直接清空，自然没法通过useActionData拿到错误信息。

完全不需要硬嵌路径做重定向这种hack写法，框架本身已经提供了适配这个场景的能力，两种方案选一个就行：

方案1：用useFetcher提交（最适配你的需求，改造成本最低） #

useFetcher天生就是用来处理「触发action/loader调用，但不触发路由跳转」的场景，和你要在子页提交父路由action、留在当前页的需求完全匹配：

• 子路由页面里不需要改action的原有逻辑，只需要把原来的Form组件换成useFetcher返回的fetcher.Form
• 提交全程不会修改URL，用户始终停留在当前子路由页面，连重定向逻辑都不用写
• 不管请求成功还是失败，action返回的所有数据都存在fetcher.data里，直接从这里取错误信息弹通知就行，数据完全不会丢
• 父路由页面的原有表单逻辑不需要做任何改动，不影响已有功能

核心代码示例：

// /data/streams/$streamId 子路由页面
import { useFetcher } from 'react-router-dom'; // Remix项目就从@remix-run/react引入

export default function StreamDetail() {
  const fetcher = useFetcher();
  // 直接从fetcher.data取父路由action返回的错误
  const actionError = fetcher.data?.error;

  return (
    <div>
      {actionError ? <div className="notification error">{actionError}</div> : null}
      {/* 表单action保持指向父路由地址，不需要修改 */}
      <fetcher.Form action="/data/streams" method="post">
        <input type="hidden" name="streamId" value={currentStream.id} />
        <button type="submit" name="intent" value="togglePause">
          {fetcher.state !== 'idle' ? '提交中...' : '暂停流'}
        </button>
      </fetcher.Form>
    </div>
  )
}

父路由的action代码完全不需要调整，不管返回错误还是执行成功，都不用加任何重定向逻辑。

方案2：抽离公共action逻辑，父子路由复用 #

如果你更习惯常规表单提交的导航逻辑，可以把表单处理的核心逻辑抽成独立的公共函数，父、子路由的action都调用这个公共方法：

• 父路由页面提交时走父路由自己的action，执行完逻辑后正常返回父页需要的数据
• 子路由页面提交时走子路由自己的action，执行完公共逻辑后：如果出错直接return错误数据，子路由的useActionData可以直接拿到；如果执行成功，要留在子页就返回对应数据，要跳其他页再写重定向逻辑即可
• 这种方式的好处是业务逻辑只维护一份，没有重复代码，完全符合框架的路由设计规则，不会出现数据丢失的问题。

这种属于绕开框架设计的hack写法，隐患很多：

• 重定向会额外触发一次路由加载请求，SSR场景下会多一次服务端往返，有不必要的性能损耗
• 重定向会清空action执行上下文，不仅拿不到错误数据，后续如果要加提交成功的状态提示，也会因为上下文丢失没法实现
• 每个表单都要手动嵌入当前页面路径，维护成本高，很容易出现路径拼接错误。

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