Reactjs 将自定义道具与RouteComponentProps组合时缺少位置、历史记录和匹配属性

我有一个处理路由的组件，我正在使用react路由器属性：“历史、匹配、位置”。我将我的功能组件映射为接收

IRoute

作为道具，并将其与RouteComponentProps组合，以便访问“历史、匹配、位置”

const PrivateRoute: FC<IRoute & RouteComponentProps> = ({ component: Component, roles, isAuthenticated, user, ...rest }) => (

);

这是我的接口代码

 export interface IRoute extends RouteComponentProps {
path     : string;
exact    : boolean;
auth     : boolean;
component: React.ElementType;
roles   ?: string[];
 }

尝试初始化PrivateRoute组件时，我在终端中得到：

TS2739: Type '{ path: string; exact: boolean; auth: boolean; component: ElementType<any>; roles?: string[] | undefined; key: number; }' is missing the following properties from type 'Readonly<Pick<IRoute & IAuthState & RouteComponentProps<{}, StaticContext, any>, "path" | "location" | "history" | "match" | "staticContext" | "component" | "exact" | "auth" | "roles">>': location, history, match

TS2739:Type“{path:string；exact:boolean；auth:boolean；component:ElementType；roles？：string[]|未定义；key:number；}”缺少类型“Readonly”中的以下属性：位置、历史记录、匹配

---

我是打字新手，如果有人能告诉我我做错了什么，我将不胜感激。谢谢你抽出时间

这可能是这个问题的重复：

我最喜欢这个答案，因为它采用了简单的嘲弄方式：

它展示了如何模拟RouteComponentProps并使用扩展操作符将其传递到组件中

类似于：

const routeComponentPropsMock = {
  history: {} as any,
  location: {} as any,
  match: {} as any,
}

{ component: Component, roles, isAuthenticated, user, ...rest, ...routeComponentPropsMock  }

const routeComponentPropsMock = {
  history: {} as any,
  location: {} as any,
  match: {} as any,
}

{ component: Component, roles, isAuthenticated, user, ...rest, ...routeComponentPropsMock  }