Support strong typing on loader function params

[JorensM]

What version of React Router are you using?

6.21.3

Steps to Reproduce

1. Create a browser router with the following route:

  {
    path: '/app/listings/[listing_id]',
    loader: listingPageLoader, // Type error occurs here
    element: //...
  }

2. Create a loader function like so

async function listingPageLoader( { params: { listing_id } }: {params: { listing_id: string }}) {
    //...
}

3. Receive type error

Expected Behavior

I expect for there to not be any type error

Actual Behavior

I receive the following type error:

Type '({ params: { listing_id } }: { params: { listing_id: string; }; }) => Promise<any>' is not assignable to type 'LoaderFunction<any>'.
  Type '({ params: { listing_id } }: { params: { listing_id: string; }; }) => Promise<any>' is not assignable to type '(args: LoaderFunctionArgs<any>) => DataFunctionValue | Promise<DataFunctionValue>'.
    Types of parameters '__0' and 'args' are incompatible.
      Type 'LoaderFunctionArgs<any>' is not assignable to type '{ params: { listing_id: string; }; }'.
        Types of property 'params' are incompatible.
          Property 'listing_id' is missing in type 'Params<string>' but required in type '{ listing_id: string; }'.

[brophdawg11]

Right now we don't support route-specific param typings - so I converted this to a Proposal for consideration. I think you should be able to extend it locally as a workaround:

LoaderFunctionArgs & {params: { listing_id: string }}

[JorensM]

Thanks, I'll do this for now, but do consider adding support for this!

[aynuayex]

I think you should be able to extend it locally as a workaround:

LoaderFunctionArgs & {params: { listing_id: string }}

please how do i do that?i don't get it?

[JorensM]

Like this:

loader: async ({ params: { param_name }}: LoaderFunctionArgs & { params: { param_name: string }}) => {
   //can access param_name with autocomplete and type safety now
}