`useLoaderData`

此钩子提供路由加载器返回的值。

import {
  createBrowserRouter,
  RouterProvider,
  useLoaderData,
} from "react-router-dom";

function loader() {
  return fetchFakeAlbums();
}

export function Albums() {
  const albums = useLoaderData();
  // ...
}

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

ReactDOM.createRoot(el).render(
  <RouterProvider router={router} />
);

在路由操作被调用后，数据将被自动重新验证，并返回加载器最新的结果。

请注意，useLoaderData *不会启动获取*。它只是读取 React Router 在内部管理的获取结果，因此您无需担心它在因路由之外的原因而重新渲染时重新获取。

这也意味着返回的数据在渲染之间是稳定的，因此您可以安全地将其传递给 React 钩子（如 useEffect）中的依赖项数组。它只会在操作或某些导航后再次调用加载器时更改。在这些情况下，身份将更改（即使值没有更改）。

您可以在任何组件或任何自定义钩子中使用此钩子，而不仅仅是 Route 元素。它将从上下文中返回最近路由的数据。

要从页面上的任何活动路由获取数据，请参阅 useRouteLoaderData.