React 路由器加载程序行为

Question

我目前正在深入研究React Router，并且我已经设置了我的路由结构，如下所示：

const router = createBrowserRouter([    
    {
        path: "/",
        loader: rootLayoutLoder,
        element: <RootLayout />,
        children: [
            {
                path: "student",
                loader: commonPageLoder,
                element: <Student />,
            },
            {
                path: "teacher",
                loader: commonPageLoder,
                element: <Teacher />,
            },
        ],
    },
]);

在我的设置中，rootLayoutLoder 函数负责调用 API 来收集教师和学生组件使用的一些常用信息。同时，commonPageLoder函数正在根据位置路径调用API来获取特定数据。

现在，这是我遇到的问题：当我在“/teacher”路径中并单击“Teacher”链接时，它会触发 rootLayoutLoder 和 commonPageLoder 函数。如何防止这种双重加载行为，同时仍然确保正确获取必要的数据？

Answer 1

这就是路由加载器通常的工作方式，它们会在某些情况下重新验证其数据，以保持数据与路由同步。

在多种情况下，数据会被重新验证，从而使您的 UI 自动与数据保持同步：

• 从

  <Form>

  调用操作后。
• 从

  <fetcher.Form>

调用操作后
• 从

  useSubmit

调用操作后
• 从

  fetcher.submit

调用操作后
• 当通过

  useRevalidator

触发显式重新验证时
• 当已渲染路由的 URL 参数发生更改时
• 当 URL 搜索参数更改时
• 导航到与当前 URL 相同的 URL 时

当您已经位于

"/teacher"

路径上时，单击

"/teacher"

链接将触发最后一个点。

您可以在路由上实现

shouldRevalidate

属性，这样当 URL 路径相同时它就不会重新验证。

const shouldRevalidate = ({ currentUrl, nextUrl }) => {
  return currentUrl.pathname !== nextUrl.pathname;
};

const router = createBrowserRouter([    
  {
    path: "/",
    loader: rootLayoutLoader,
    element: <RootLayout />,
    children: [
      {
        path: "student",
        loader: commonPageLoader,
        shouldRevalidate,
        element: <Student />,
      },
      {
        path: "teacher",
        loader: commonPageLoader,
        shouldRevalidate,
        element: <Teacher />,
      },
    ],
  },
]);