Define type safe routes

For each route we create a new file (inside routes folder). Each route uses createFileRoute to define the component (and loader if needed):

export const Route = createFileRoute("/")({
  component: RouteComponent,
  loader: () =>
    RuntimeClient.runPromise(
      // ...
    ),
});

function RouteComponent() {
  const data = Route.useLoaderData();
  
  // ...
}

The app contains also a dynamic route that provides the date for the meal plan. A dynamic route is created by adding a $ prefix to the route (e.g. $date.tsx):

// ℹī¸: TanStack router automatically generated the route scaffolding for you
export const Route = createFileRoute("/$date")({
  component: RouteComponent,
  loader: ({ params }) =>
    RuntimeClient.runPromise(
      // 👇 Extract and provide valid date from `params`
      Schema.decode(DailyLogSelect.fields.date)(params.date)
    ),
});

function RouteComponent() {
  const date = Route.useLoaderData();
  
  // ...
}

TanStack router generates a routeTree.gen.ts file to make each route type-safe.

You can add the following configuration inside .vscode/settings.json (part of the default TanStack router initialization):

.vscode/settings.json
{
  "files.watcherExclude": {
    "**/routeTree.gen.ts": true
  },
  "search.exclude": {
    "**/routeTree.gen.ts": true
  },
  "files.readonlyInclude": {
    "**/routeTree.gen.ts": true
  }
}

With this setup all the routes are now type-safe and automatically generated for you based on each route file you create.