fetcher.load与GET提交是否等价？二者差异场景探讨

我希望理解fetcher.load的存在意义及适用场景。根据文档，fetcher.load会调用路由的loader，而fetcher.submit({method: 'GET'})同样会执行该操作。在以下实验中我未发现二者差异，想了解是否存在二者表现不同的场景？

const loader: LoaderFunction = ({ request }) => {
  const url = new URL(request.url)
  console.log("calling loader");
  const data = {"key":"value", url: url}
  return data
}

export const App = () => {
  const fetcher = useFetcher();
  const fetcher2 = useFetcher();

  const handleClick = () => {
    fetcher.load(`/query-data?input=abc`)
  }

  return (
    <div>
      <button onClick={handleClick} >
        click me 
      </button>
      <pre>{ JSON.stringify(fetcher.data, null, 2) }</pre>
      <hr />
      <fetcher2.Form method="GET" action="/query-data">
        <input name="input" value="abc" type="text" readOnly />
        <button type="submit"> submit </button>
      </fetcher2.Form>
      <pre>{ JSON.stringify(fetcher2.data, null, 2) }</pre>
    </div>
  )
}
const root = createRoot(document.getElementById('app'));

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  { /*resource route*/
    path: "/query-data",
    loader: loader
  }
]);

root.render(
  <RouterProvider router={router} />
);

二者核心差异及不同表现场景 #

虽然在简单GET请求场景下两者行为相似，但在以下场景中会表现出明显差异：

1. 参数传递方式 #

• fetcher.load：仅支持通过URL字符串携带查询参数，必须手动拼接参数到URL中，适合参数结构简单的场景。
• fetcher.submit(GET)：支持通过FormData传递参数，若使用<fetcher.Form>组件，会自动将表单字段转换为URL查询参数，适合需要从表单UI收集复杂参数的场景。

2. 表单关联与状态跟踪 #

• fetcher.load：完全程序化触发，不与任何表单元素绑定，不会在fetcher实例中留下表单相关状态（如formData、submitting状态）。
• fetcher.submit(GET)：属于表单提交操作，即使使用GET方法，fetcher会跟踪表单的提交状态（fetcher.state会显示submitting），且fetcher.formData会保留提交的表单数据，适合需要展示表单加载状态的场景。

3. 触发逻辑的适配性 #

• fetcher.load：无需依赖表单UI，适合在按钮点击、定时器等非表单场景下触发数据加载，比如页面滚动到某个位置时加载更多数据。
• fetcher.submit(GET)：更适配表单工作流，比如需要先执行表单验证，再触发查询的场景，<fetcher.Form>会自动处理默认提交行为的阻止，同时支持表单级别的验证逻辑。

适用场景总结 #

• 用fetcher.load：

  • 程序化触发简单GET查询，无需表单UI支持
  • 按需加载路由数据（如页面初始化后补充加载额外数据）
  • 不需要跟踪表单提交状态的场景

• 用fetcher.submit(GET)：

  • 已有表单UI，通过表单提交触发查询
  • 需要从表单字段自动构建复杂查询参数
  • 需要展示表单提交加载状态的场景

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