是在服务器端，客户端或两者上调用react router 6.4加载器吗?

Question

我试图理解react-router@6.4中的加载器。BrowserRouter如何以及为什么要做DB调用?这只是一个人为的例子，这意味着是一个客户端数据库调用说明的目的或有一些未记录的服务器活动发生在这里?

https://reactrouter.com/en/main/route/loader

createBrowserRouter([
{
element: <Teams />,
path: "teams",
loader: async () => {
return fakeDb.from("teams").select("*");
},
children: [
{
element: <Team />,
path: ":teamId",
loader: async ({ params }) => {
return fetch(`/api/teams/${params.teamId}.json`);
},
},
],
},
]);

Answer 1

是在服务器端，客户端还是两者上调用react router 6.4加载器?

在客户端调用加载器。react-router-dom主要处理客户端路由。如果你正在使用服务器端渲染，那么RRD的建议是使用Remix。

我试图理解在反应路由器6.4+加载器。如何以及为什么?一个browserRouter做DB调用?

"how"是微不足道的，loader函数是在呈现路由元素之前运行的回调函数。"why"这样应用程序就可以在加载/访问路由时获取数据、验证用户、提交分析/指标等。你想要或需要在加载路由组件之前做什么，实际上取决于你的具体用例。

createBrowserRouter([
{
element: <Teams />,
path: "teams",
loader: async () => {
return fakeDb.from("teams").select("*");
},
children: [
{
element: <Team />,
path: ":teamId",
loader: async ({ params }) => {
return fetch(`/api/teams/${params.teamId}.json`);
},
},
],
},
]);

这只是一个人为的例子，这意味着是一个客户端数据库调用说明的目的或有一些未记录的服务器这里有什么活动?

是的，这是一个完全人为的代码示例，用于说明目的，没有未记录的活动。"fakeDb"是一些客户端数据库客户端正在选择all从"teams"并将其返回给Teams组件，该组件可通过useLoaderData钩子访问。fetch是一个标准的Javascript API，用于异步获取数据。

Answer 2

在您的示例中，两个异步函数都对某个后端进行调用。fakeDb似乎通过库/sdk瞄准了某种SQL服务器。Fetch是调用后端api端点(在某些服务器上)的典型方法。

路由器本身可能会调用服务器来获取页面内容，但如果最近访问过，它也可能被缓存在浏览器中。

代码片段中的所有代码都在浏览器中执行，但正如前面提到的，它确实要求服务器做一些事情。但是服务器所做的，代码在其他地方。