loader prop in react-router-dom typescript error for params prop type definition

Question

i was trying to using params prop in the loader prop in the routes, since i am using typescript i define the params as shown below but typescript is yelling at me i do not know why? please any way i can get around this would be apperciated, thanks in advance.

Type '({ params }: CustomLoaderFunctionArgs) => Promise<any>' is not assignable to type 'LoaderFunction<any>'.
  Type '({ params }: CustomLoaderFunctionArgs) => 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 'CustomLoaderFunctionArgs'.
        Type 'LoaderFunctionArgs<any>' is not assignable to type '{ params: { id: string; }; }'.
          Types of property 'params' are incompatible.
            Property 'id' is missing in type 'Params<string>' but required in type '{ id: string; }'.ts(2322)
patient-form.tsx(45, 66): 'id' is declared here.
components.d.ts(61, 5): The expected type comes from property 'loader' which is declared here on type 'IntrinsicAttributes & RouteProps'
(property) loader: ({ params }: CustomLoaderFunctionArgs) => Promise<any>
No quick fixes available

function App() {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RootLayout />}>
        <Route index element={<IndexPage />} />
        <Route path="about" element={<ContactPage />} />
        <Route path="sign-in" element={<SignInPage />} />
        <Route path="sign-up" element={<SignUpPage />} />
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardPage />} loader={patientsDataLoader} />
          <Route path="patient/:id" element={<PatientForm initialData={null} />} loader={patientDataLoader}/>
        </Route>
      </Route>
    )
  );

  return <RouterProvider router={router} />;
}

export default App;

export const patientDataLoader = async ({params} : {params: {id: string}}) => {
  const response = await axios.get(`http://localhost:3000/api/patient/${params.id}`);
  return response.data;
}

Answer 1

The issue is the way you passed the params to the function. In the documentation, it's mentioned how to pass params to the loader function. Please check it out and check the following solution.

createBrowserRouter([
  {
    path: "/teams/:teamId",
    loader: ({ params }) => {
      return fakeGetTeam(params.teamId);
    },
  },
]);

For your function:

export const patientDataLoader = async ({ params }) => {
  const response = await axios.get(`http://localhost:3000/api/patient/${params.id}`);
  return response.data;
}

Document link: https://reactrouter.com/en/main/route/loader