React Router 6+：如何为路由Loader中的params参数强类型定义？

问题背景 #

现有路由配置代码：

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

对应的Loader代码：

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

需要为params参数添加强类型定义，让路径中指定的参数（比如todoId）获得类型提示。

解决方案 #

借助React Router提供的ParamParseKey和Params工具类型，结合常量路由路径即可实现强类型约束，完整代码如下：

import { LoaderFunction, ActionFunctionArgs, Params, ParamParseKey } from 'react-router-dom';

// 定义常量路由路径，as const 确保路径字符串的类型不被拓宽为普通string
const PathNames = {
  todoDetail: '/todos/:todoId',
} as const;

// 扩展参数类型，解析路由路径中的参数名
interface LoaderArgs extends ActionFunctionArgs {
  params: Params<ParamParseKey<typeof PathNames.todoDetail>>;
}

// 为Loader的参数指定强类型
export const loader: LoaderFunction = async ({ params }: LoaderArgs) => {
  // 此时 params.todoId 会获得完整的类型提示
  return await fetchData(params.todoId);
};

步骤说明 #

• 定义常量路由路径：使用as const断言，让TypeScript保留路径字符串的字面量类型，确保后续能正确解析出参数名。
• 扩展参数接口：通过ParamParseKey<typeof PathNames.todoDetail>解析出路径中的参数名todoId，再结合Params类型生成强类型的params对象。
• 指定Loader参数类型：将Loader的参数类型指定为自定义的LoaderArgs，此时params会严格匹配路径中定义的参数，编辑器也会提供对应的类型提示。

内容的提问来源于stack exchange，提问作者qvazi