react-router-dom 中的 loader prop 参数 prop 类型定义的打字稿错误

Question

我试图在路线的 loader 属性中使用 params 属性，因为我使用的是 typescript，我定义了如下所示的参数，但 typescript 对我大喊大叫，我不知道为什么？ 请以任何方式解决这个问题，我将不胜感激，提前致谢。

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

React-Router 基本上已经输入了 params 对象，并且这些值实际上始终是可选的。

/**
 * The parameters that were parsed from the URL path.
 */
export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

/**
 * @private
 * Arguments passed to route loader/action functions.  Same for now but we keep
 * this as a private implementation detail in case they diverge in the future.
 */
interface DataFunctionArgs<Context> {
  request: Request;
  params: Params;
  context?: Context;
}

/**
 * Arguments passed to loader functions
 */
export interface LoaderFunctionArgs<Context = any>
  extends DataFunctionArgs<Context> {}

通常的做法是将

params

转换为包含特定路径参数的类型。

示例：

export const patientDataLoader = async ({ params }) => {
  const { id } = params as { id: string };

  const { data } = await axios.get(`http://localhost:3000/api/patient/${id}`);
  return data;
}