`useRouteLoaderData`

此钩子使任何当前渲染路由的数据在树中的任何位置都可用。这对于树中深层组件需要来自更远上层路由的数据，以及父路由需要来自树中更深层子路由的数据很有用。

此功能仅在使用数据路由时有效，请参阅选择路由器

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

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

React Router 使用确定性的、自动生成的路由 ID 在内部存储数据，但您可以提供自己的路由 ID，使此钩子更容易使用。考虑一个具有定义 ID 的路由的路由器

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

现在，用户可以在应用程序中的任何其他位置使用。

const user = useRouteLoaderData("root");

仅可用的数据是当前渲染的路由。如果您请求未当前渲染的路由的数据，则钩子将返回 undefined。