reactjs - 将自定义 Prop 与 RouteComponentProps 组合时缺少位置、历史和匹配属性

Question

我有一个处理路由的组件，我正在使用 react-router 属性:'history, match, location'。我将我的功能组件映射为接收 IRoute 作为 props 并将其与 RouteComponentProps 结合以访问“历史、匹配、位置”；

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

);

这是我的路线代码。

const routes: IRoute[] = [
{
    path     : '/',
    exact    : true,
    auth     : false,
    component: Home
},
]

这是我的界面代码。

 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

我是 typescript 的新手，所以如果有人能向我解释我做错了什么，我将不胜感激。感谢您的宝贵时间!

Answer 1

这可能是这个问题的重复:How to test a React component with RouteComponentProps?

由于简单的模拟方法，我最喜欢这个答案:https://stackoverflow.com/a/60765926/2212881

它展示了如何模拟 RouteComponentProps 并使用传播运算符将其传递到您的组件中。

类似于:

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

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