TypeScript 3: JSX element type 'Component' does not have any construct or call signatures. [2604]

Question

I\'m trying to pass a variable of type React.Component (or React.FunctionComponent) into a Route, like this:

import React from \'react\';
import { Route } from \         


        

Answer 1

Late to the party, with "@types/react-router-dom": "^4.3.4" and "@types/react": "16.9.1", and if you're using RouteProps, you will probably get the same error.

JSX element type 'Component' does not have any construct or call signatures. [2604]

That's because, in the RouteProps interface, the component is defined as optional, hence it might be undefined.

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

Simply check for if the component is falsy will fix it.

function PrivateRoute({ component: Component, ...rest }: RouteProps) {
  if (!Component) return null;
  return (
    
        fakeAuth.isAuthenticated ? (
          
        ) : (
          
        )
      }
    />
  );
}