`useLoaderData`

此 Hook 會提供從路由載入器傳回的值。

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} />
);

呼叫路由 ACTIONS 之後，資料會自動重新驗證，並傳回載入器的最新結果。

請注意，useLoaderData 並不會啟動取用。它只是讀取 React Router 內部管理的取用結果，因此您不必擔心在因路由以外的原因重新渲染時，會重新取用。

這也表示傳回的資料在渲染之間是穩定的，因此您可以安全地將其傳遞給 React Hook（例如 useEffect）中的相依性陣列。它只會在動作或特定導覽後再次呼叫載入器時變更。在這種情況下，身分會變更（即使值不會變更）。

您可以在任何元件或自訂 Hook 中使用此 Hook，而不只是 Route 元素。它會從最接近的路由中返回內容。

若要取得頁面上任何已啟用路由的資料，請參閱 useRouteLoaderData。