component props & signatures

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ComponentProps type structure

ComponentProps is a generated type for the default component export of a route. It includes properties like loaderData which contains the data returned from the loader. For example, if a loader returns { planet: string }, then ComponentProps includes loaderData: { planet: string }.

Layout component props interface

The Layout component exported from root.tsx accepts an object with a children property of type React.ReactNode.

Route component props example

Example showing route component that receives and displays loaderData, actionData, params, and matches props using Route.ComponentProps type.

Route component props: loaderData, actionData, params, matches

When a route component is rendered, it receives props from Route.ComponentProps: loaderData (data returned from the loader function), actionData (data returned from the action function), params (object containing route parameters), and matches (array of all matches in the current route tree). These props can be used in place of hooks like useLoaderData or useParams.

DataStrategyFunctionArgs interface

DataStrategyFunctionArgs extends DataFunctionArgs and includes: request (Request), params (Params), context (any, optional), and matches (AgnosticDataStrategyMatch[]).

dataStrategy return type HandlerResult

dataStrategy returns an array of HandlerResult objects. Each HandlerResult has: type (ResultType.success | ResultType.error), result (any), and an optional status field for conveying HTTP status codes.

HandlerResult status field for HTTP status codes

HandlerResult accepts an optional status field to convey HTTP status codes. This is necessary for custom response decoding scenarios where users need to return both data and status code information without wrapping in ErrorResponse.

dataStrategy return type

The dataStrategy function must return a Record<string, DataStrategyResult> which contains the result for each handler executed, keyed by route ID.

dataStrategy function signature and parameters

A custom dataStrategy function receives the following parameters: request, params, context, matches (array of DataStrategyMatch instances), runClientMiddleware (helper function to run middleware), and fetcherKey (present if this is a fetcher request, not a navigation).

Route.LoaderArgs signature

Route.LoaderArgs is the type for loader function arguments. It contains a params property that holds the route parameters extracted from the URL.

Route.ClientLoaderArgs signature

Route.ClientLoaderArgs is the type for clientLoader function arguments. It contains params for route parameters, and optionally serverLoader which is a function that can be called to fetch data from the server loader when both loaders are used together.

Route.ComponentProps signature

Route.ComponentProps is the type for route component props. It contains a loaderData property that holds the data returned from the loader or clientLoader functions.

loaderData prop in components

The loaderData prop is automatically passed to route components and contains the data returned from loader and clientLoader functions. The type for loaderData is automatically generated.

actionData prop access in component

Components receive actionData through Route.ComponentProps which contains data returned from the most recent action execution. Access it as: `export function Signup({ actionData }: Route.ComponentProps) { const userNameError = actionData?.errors?.userName; }`

ErrorBoundary component signature in framework mode

In Framework Mode, the ErrorBoundary component receives Route.ErrorBoundaryProps as its props object. The error prop is passed directly without needing a hook to access it.

ServerComponent receives Route.ServerComponentProps

A `ServerComponent` export receives props of type `Route.ServerComponentProps` which includes `loaderData` from the loader function.

Give your agent this brain