useRouteLoaderData

useRouteLoaderData() Hook 用来在当前已经渲染的组件中获取组件树中任何组件的loader方法获取到的数据,不过通常都用来获取其祖辈层级的数据。这个 Hook 接受一个参数,用于指定要获取的loader方法数据所在的组件的id

例如可以像以下示例中使用。

const router = createBrowserRouter([
  {
    path: "/",
    loader: () => fetchData(),
    element: <Root />,
    id: "root",
    children: [
      {
        path: "task/:tid",
        loader: loadTask,
        element: <TaskDetail />,
      },
    ],
  },
]);

function TaskDetail() {
  const tasks = useRouteLoaderData("root");

  // 其他业务代码
}