TypeScript 3: el tipo de elemento JSX ‘Component’ no tiene ninguna construcción o signaturas de llamada. [2604]

Solución:

Tarde a la fiesta, con "@types/react-router-dom": "^4.3.4" y "@types/react": "16.9.1", y si estás usando RouteProps, probablemente obtendrá el mismo error.

El tipo de elemento JSX ‘Componente’ no tiene ninguna construcción o firma de llamada. [2604]

Eso es porque, en el RouteProps interfaz, el component se define como opcional, por lo que podría estar indefinido.

export interface RouteProps {
  location?: H.Location;
  component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  render?: ((props: RouteComponentProps<any>) => React.ReactNode);
  children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
  path?: string | string[];
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
}

Simplemente verifique si el component es falso lo arreglará.

function PrivateRoute({ component: Component, ...rest }: RouteProps) {
  if (!Component) return null;
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

Me he encontrado con esto un par de veces. Prueba estos:

1. Escriba su PrivateRoute como React.FC<Props>
2. Escriba su componente entrante como React.ElementType

La verdad última sobre los tipos de React proviene de los documentos

Editar: React.ReactType (obsoleto) -> React.ElementType

Incluso más tarde para la fiesta, pero lo que funcionó para mí es esto:

interface PrivateRouteProps extends Omit<RouteProps, "component"> {
  component: React.ElementType;
  // any additional vars
}

PrivateRoute: React.FC<PrivateRouteProps> = ({
  component: Component,
  ...rest
}) => {
// render code
}

---

---

Utiliza Nuestro Buscador