TypeScript 3: JSX element type 'Component' does not have any construct or call signatures. [2604]
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<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;
}
Simply check for if the component
is falsy will fix it.
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 }
}}
/>
)
}
/>
);
}
I have encountered this a couple of times. Try these:
- Type your
PrivateRoute
asReact.FC<Props>
- Type your incoming component as
React.ElementType
The ultimate truth about React types comes from the docs
Edit: React.ReactType (deprecated) -> React.ElementType
Even later to the party, but what worked for me is this:
interface PrivateRouteProps extends Omit<RouteProps, "component"> {
component: React.ElementType;
// any additional vars
}
PrivateRoute: React.FC<PrivateRouteProps> = ({
component: Component,
...rest
}) => {
// render code
}