reactjs - 类型 '(props: RouteProps) => JSX.Element' 不可分配给类型 'PropsWithChildren'

Question

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

类型 '(props: RouteProps) => JSX.Element' 不可分配给类型 'PropsWithChildren'。
“（props：RouteProps）=> JSX.Element”类型中缺少属性“组件”，但在“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;

谁能帮我解决这个问题

标签： reactjstypescriptreact-router

Answer 1

PropsWithChildren justtype PropsWithChildren<P> = P & { children?: ReactNode }; 应该包括 Route 的 props 和自定义的 props。

这是我的想法：

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="/" />)}
    />
);