Type-safe Routes and Loaders with TanStack Router

import { createRootRoute, createRoute, Outlet } from "@tanstack/react-router";

const rootRoute = createRootRoute({ component: () => <Outlet /> });

const patientRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/patients/$patientId",
  // loader runs before the component mounts
  loader: ({ params }) =>
    fetch(`/api/patients/${params.patientId}`).then((r) => r.json()),
  component: PatientScreen,
});

function PatientScreen() {
  const patient = patientRoute.useLoaderData();
  return <h1>{patient.name}</h1>;
}