React router 6+：如何在路由加载器中强类型化 params 选项？答案

【问题标题】：React router 6+ : how to strongly type the params option in route loader?React router 6+：如何在路由加载器中强类型化 params 选项？
【发布时间】：2023-02-03 02:22:51
【问题描述】：

有路由器

export const router = createBrowserRouter([
  {
    path: '/todos/:todoId',
    element: <Todo />,
    loader: todoLoader,
  }
]);

有装载机

export const loader: LoaderFunction = async ({ params }) => {
  return await fetchData(params.todoId);
};

如何根据路径输入参数？

等待路径中指定参数的高亮显示

【问题讨论】：

标签： reactjs typescript react-router-dom react-typescript

【解决方案1】：

这是一个有点迂回的方法，但这似乎是正确输入的并且在运行的 codesandbox 中工作，虽然可能有点“hackish”（我的打字稿 foo 不是很好).要点是您需要覆盖加载程序函数args参数，以便您可以覆盖params属性以包含您想要在加载程序中访问的路径参数。

要覆盖的加载程序定义：

/**
 * The parameters that were parsed from the URL path.
 */
export declare 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 {
    request: Request;
    params: Params;
    context?: any;
}
/**
 * Arguments passed to loader functions
 */
export interface LoaderFunctionArgs extends DataFunctionArgs {
}
/**
 * Route loader function signature
 */
export interface LoaderFunction {
    (args: LoaderFunctionArgs): Promise<Response> | Response | Promise<any> | any;
}

新的接口声明和用法：

import {
  RouterProvider,
  createBrowserRouter,
  Navigate,
  useLoaderData,
  LoaderFunction,
  LoaderFunctionArgs
} from "react-router-dom";

interface TodoLoaderFunctionArgs extends Omit<LoaderFunctionArgs, "params"> {
  params: {
    todoId: string;
  };
}

interface TodoLoaderFunction extends Omit<LoaderFunction, "args"> {
  (args: TodoLoaderFunctionArgs):
    | Promise<Response>
    | Response
    | Promise<any>
    | any;
}

const todoLoader: TodoLoaderFunction = async ({ params }) => {
  return await fetchData(params.todoId);
};

const router = createBrowserRouter([
  {
    path: "/todos/:todoId",
    element: <Todo />,
    loader: todoLoader as LoaderFunction
  },
]);

【讨论】：