`useRouteLoaderData`

這個 Hook 讓任何目前呈現的路由中的數據，可以在程式樹的任何地方使用。這對於程式樹裡更深層的組件需要使用較高層級路由的資料時很有用，而且父路由也需要較深層子路由的資料。

此功能僅在使用資料路由時有效，請參閱選擇路由器

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

function SomeComp() {
  const user = useRouteLoaderData("root");
  // ...
}

React Router 會以確定性的、自動產生的路由 ID 內部儲存資料，但是你可以提供自訂路由 ID，讓這個 Hook 變更容易使用。想一下有一個路由會定義 ID 的路由

createBrowserRouter([
  {
    path: "/",
    loader: () => fetchUser(),
    element: <Root />,
    id: "root",
    children: [
      {
        path: "jobs/:jobId",
        loader: loadJob,
        element: <JobListing />,
      },
    ],
  },
]);

現在 user 可在應用程式的任何地方使用。

const user = useRouteLoaderData("root");

唯一可用的資料是目前已呈現的路由。如果你要求的資料來自於目前尚未呈現的路由，這個 Hook 會回傳 undefined。