在每个子路由重定向时调用父加载器函数

Question

我的用例是

路由器配置.js

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Product, { loader } from "./Product";
import Route1 from "./Route1";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Product />,
    loader: loader,
    children: [
      {
        path: "routeone",
        element: <Route1 />
      }
    ]
  }
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

产品.js

import Header from "./Header";
import { Outlet } from "react-router-dom";
import Router from "./Router";

const Product = () => {
  return (
    <>
      <Header />
      <Outlet />
      <Router />
    </>
  );
};

export default Product;

export const loader = () => {
  console.log("loader");
  return -1;
};

Header.js

const Header = () => {
  return <p>Header</p>;
};

export default Header;

Route1.js

import { NavLink } from "react-router-dom";

const Router = () => {
  return (
    <>
      <NavLink to={"routeone"}>
        <span> Route 1</span>
      </NavLink>
    </>
  );
};

export default Router;

在加载每个子路由之前，我需要加载特定的数据。因此，我使用父路由的加载器。看来，单击 NAVLink 两次（令人惊讶的是，只有双击，而不是单击 NAVLink），路由到子路由，触发我的父加载程序。我的目的是让父路由的加载器仅被调用一次，无论内部重定向如何。

但是如果我有 shouldRevalidate: () => false，似乎可以解决问题。这是正确的方法还是我错过了什么？

Answer 1

再次调用路由加载器的原因有很多，例如初始路线加载后，重新验证路线数据。我在下面强调了您遇到的情况。

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

• 从 .
调用操作后
• 从
调用操作后
• 从 useSubmit 调用操作后
• 从 fetcher.submit 调用操作后
• 当通过 useRevalidator 触发显式重新验证时
• 当已渲染路由的 URL 参数发生更改时
• 当 URL 搜索参数更改时
• 导航到与当前 URL 相同的 URL 时

如果您希望根

"/"

路由仅在第一次加载时加载一次，则指定

shouldRevalidate

属性并返回

false

将仅调用加载器一次，而不是在应用程序的任何后续时间中调用加载器导航到相同的当前 URL 路径。