如何防止儿童重定向时多次调用 React Router 6 中的布局加载器？

Question

我有以下路由器配置：

const router = createBrowserRouter([
  {
    element: <Layout />,
    loader: loaderFunction,
    children: [
      {
        path: '/home',
        element: <HomePage />
      },
      {
        path: '/about',
        element: <AboutPage />
      },
      {
        path: '/contact',
        element: <ContactPage />
      },
    ],
    errorElement: <ErrorPage />
  },
  {
    path: '*',
    element: <NotFoundPage />
  }
]);

该配置有一个<Layout />父级，以及多个子级路由（及其各自的组件）。

这样做的原因是，如果用户直接输入这些路径中的任何一个，都会发生相同的行为。

即，loaderFunction应该获取数据。然后在数据中<Layout />进行解析和分析......然后使用这些信息，使用如下条件重定向用户：

if (conditionA && pathname !== '/about') {
  return <Navigate to="/about" replace />
}

if (conditionB && && pathname !== '/contact') {
  return <Navigate to="/contact" replace />
}

return <Outlet />;

问题是，当重定向指向这些子组件之一时，会loaderFunction重新触发，从而导致多个服务器调用。

是否有内置的方法来管理此问题以避免此问题？或者也许有更好的模式来编程？

Answer 1

shouldRevalidate标志设置来false解决您的问题；

它使您可以控制防止加载程序调用。

const router = createBrowserRouter([
  {
    element: <Layout />,
    loader: loaderFunction,
    shouldRevalidate: () => false,
  }
])  

文档