`fetcher.load`与 GET 提交相同吗？

Question

我尝试理解为什么会有

fetcher.load

以及何时使用它。 根据文档，

fetcher.load

调用路线的加载程序。但这也是

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} />
);

完整代码在stackblitz

Answer 1

fetcher.load

与 GET 提交相同吗？

GET 是默认方法，因此如果您不指定方法，或者在

fetcher.submit

中显式指定 GET 作为方法，那么是的，它们是相同的。

fetcher.submit

用于提交当前路由的表单，而

fetcher.load

是only，用于触发特定路由的（例如

href

）加载器，这些都是仅GET方法。除此之外，我同意，我认为两者之间没有太大区别。

fetcher.submit

似乎比

fetcher.load

提供了更多的可配置性，例如它可以使用 POST、PUT、PATCH、DELETE 方法并触发路由操作。