react-router

React Router

• You are using the latest version of React Router (v7).
• Always include the suffix Page when naming the default export of a route.
• The primary export in a routes file should specify loaderData like export default function RouteNamePage({ loaderData }: Route.ComponentProps). loaderData is the return value from clientLoader.
• Use href("/products/:id", { id: "abc123" }) to generate a url path for a route managed by the application.
  • Look at routes.ts to determine what routes and path parameters exist.
• Use export async function clientLoader(loaderArgs: Route.ClientLoaderArgs) to define a clientLoader on a route.
• Do not define Route.* types, these are autogenerated and can be imported from import type { Route } from "./+types/routeFileName"
• If URL parameters or query string values need to be checked before rendering the page, do this in a clientLoader and not in a useEffect
• Never worry about generating types using pnpm
• Use <AllMeta /> instead of MetaFunction or individual <meta /> tags
• Move derived config and business rules to the backend (computed fields, calculations, etc). Do not grow client-only sources of truth.
• Use outlets to store global config (such as Stripe keys, application settings, etc).
• Hide repeated mobile/desktop conditional styling behind a helper; individual components should not re-encode breakpoints
• Use the following pattern to reference query string values (i.e. ?theQueryStringParam=value)

const [searchParams, _setSearchParams] = useSearchParams()
// searchParams contains the value of all query string parameters
const queryStringValue = searchParams.get("theQueryStringParam")

Loading Mock Data

Don't load mock data in the component function with useEffect. Instead, load data in a clientLoader:

// in mock.ts
export async function getServerData(options: any) {
  // ...
}

// in web/app/routes/**/*.ts
export async function clientLoader(loaderArgs: Route.ClientLoaderArgs) {
  // no error reporting is needed, this will be handled by the `getServerData`
  // mock loading functions should return result in a `data` key
  const { data } = await getServerData({
    /* ... */
  });

  // the return result here is available in `loaderData`
  return data;
}