JSX element type ‘Component’ does not have any construct or call signatures.

문제상황

export namespace VC {
  ...
  export interface AuthRouteProps extends RouteProps {
    authenticated: boolean
  }
  ...
}

import React, { FC, ReactElement } from "react";
import { Route, Redirect } from "react-router-dom";
import { VC } from "../../types";
const AuthRoute: FC<VC.AuthRouteProps> = ({ authenticated, render, component: Component, ...rest }): ReactElement => {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated ? (
          render ? (
            render(props)
          ) : (
            <Component {...props}></Component>
          )
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
}
export default AuthRoute;

Custom React Router Component를 만드는 중이었다. 문제가 되는 부분은 <Component {...props}></Component> 이다. 에러메세지는 다음과 같다.

JSX element type 'Component' does not have any construct or call signatures.ts(2604)

조사

근본적인 문제는,,, Component가 undefined일수도 있다는거였다.

그래서 Component가 undefined인지 체크하는 과정이 없었기 때문에, React.ComponentType임에도 불구하고 <Component .. 이렇게 쓸 수 없었다.

해결책 정리

import React, { FC, ReactElement } from "react";
import { Route, Redirect } from "react-router-dom";
import { VC } from "../../types";
const AuthRoute: FC<VC.AuthRouteProps> = ({authenticated, render, component: Component, ...rest}): ReactElement => {
  return (
    <Route
      {...rest}
      render={(props) =>
        authenticated ? (
          render ? (
            render(props)
          )
          : Component ? (
            <Component {...props}></Component>
          )
          : ({})
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
}
export default AuthRoute;