Data is provided to route components from route loaders:
createBrowserRouter([ { path: "/", loader: async () => { // return data from here return { records: await getSomeRecords() }; }, Component: MyRoute, }, ]); The data is available in route components with useLoaderData.
import { useLoaderData } from "react-router"; function MyRoute() { const { records } = useLoaderData(); return <div>{records.length}</div>; } As the user navigates between routes, the loaders are called before the route component is rendered.
Next: Actions