Javascript react 路由加载程序行为

发布于04月23日

我目前正在研究React-Router，并设置了如下路由 struct :

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

在我的设置中，rootLayoutLoader函数负责调用API来收集Teacher和Student组件使用的一些常见信息.同时，commonPageLoader函数正在根据位置路径调用API来获取特定数据.

现在，这是我遇到的问题:当我在"/teacher"路由中单击"Teacher"链接时，它会触发rootLayoutLoader和commonPageLoader功能.如何防止这种双重加载行为，同时仍然确保适当获取必要的数据？

推荐答案

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

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

从<Form>调用操作后.

从<fetcher.Form>调用操作后

从useSubmit调用操作后

从fetcher.submit调用操作后

当通过useRevalidator触发显式重新验证时

当已渲染的路由的URL参数更改时

当URL搜索参数更改时

100

当您已经在"/teacher"路径上时，单击"/teacher"链接时，将触发最后一个点.

您可以在路由上实现shouldRevalidateprops ，以便当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 />,
      },
    ],
  },
]);