类型 &#39;(props: RouteProps) =&gt; JSX.Element&#39; 不可分配给类型 &#39;PropsWithChildren<RouteProps> &#39;

Question

我正在使用带有反应的打字稿我想渲染一个组件但收到打字稿错误

类型 '(props: RouteProps) => JSX.Element' 不可分配给类型 'PropsWithChildren'。
类型“(props: RouteProps) => JSX.Element”中缺少属性“component”，但在“RouteProps”类型中需要。

 import React, { ReactNode, PropsWithChildren } from "react";
 import { Route, Redirect } from "react-router";
 
  export interface RouteProps {
     component: FunctionComponent;
   }


 interface PrivateRoutesProp {
   // component: PropsWithChildren<RouteProps> // not works  
     // also having "noImplicitAny": true, [this was mandatory]
   component: PropsWithChildren<???>; //what i have to use here,object is not working
   exact: boolean;
  path: string;
 }

const PrivateRoute = ({ component: Component, ...rest }: PrivateRoutesProp) => (
  <Route
   {...rest}
  render={(props) => (isLoggedIn ? <Component {...props} /> : <Redirect to="/" />)}
  />
  );

 export default PrivateRoute;

谁能帮我解决这个问题

Answer 1

PropsWithChildren 只需type PropsWithChildren<P> = P & { children?: ReactNode }; 它应该包括 Route 和自定义道具的道具。

这是我的想法：

export interface PrivateRoutesProp {
    component: FunctionComponent;
    exact: boolean;
    path: string;
    isLogin: boolean
}

const PrivateRoute = ({ component, isLogin, ...rest }: PropsWithChildren<PrivateRoutesProp & RouteProps>) => (
    <Route
        {...rest}
        render={(props) => (isLogin ? React.createElement(component, props) : <Redirect to="/" />)}
    />
);