数据加载

框架
数据
声明式

提供数据

数据通过路由加载器提供给路由组件

createBrowserRouter([
  {
    path: "/",
    loader: () => {
      // return data from here
      return { records: await getSomeRecords() };
    },
    Component: MyRoute,
  },
]);

访问数据

数据在路由组件中通过 useLoaderData 可用。

import { useLoaderData } from "react-router";

function MyRoute() {
  const { records } = useLoaderData();
  return <div>{records.length}</div>;
}

当用户在路由之间导航时，加载器会在路由组件渲染之前被调用。

下一篇：Actions