数据通过路由加载器提供给路由组件
createBrowserRouter([
{
path: "/",
loader: async () => {
// 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>;
}
当用户在路由之间导航时，加载器会在路由组件渲染之前被调用。
下一步: 操作