I'm using react router like this.

I get the 'Component' from the routes, but ts throw an error, in the js, there is no Error.

import React from "react";
import { Route, Switch, useRouteMatch, withRouter } from "react-router-dom";
import type { MyRoute } from "./types";

const routes: MyRoute[] = [
  {
    path: "overview",
    Component: Index,
    title: "概览",
    name: "index",
    requireAuth: false,
  }
];

const MainRoute: React.FunctionComponent = () => {
  const match = useRouteMatch();
  const filter = (route: MyRoute): JSX.Element => {
    const { Component } = route;
    return (
      <Route
        key={route.path}
        path={`${match.path}/${route.path}`}
        exact
        render={(props) => {
          document.title = route.title;
          // throw error in this line:JSX element type 'Component' does not have any construct or call signatures.
          return <Component {...props} />;
        }}
      />
    );
  };
  return (
        <Switch>{routes.map(filter)}</Switch>);
};

export default withRouter(MainRoute);

there is a error:JSX element type 'Component' does not have any construct or call signatures. how can I fix it

CodePudding user response：

export interface MyRoute {
  path: string;
  Component?: JSX.Element | React.ReactNode | React.FunctionComponent;
  title: string;
  name: string;
  requireAuth?: boolean;
  children?: MyRoute[];
}

CodePudding user response：

You need to change:

  Component?: JSX.Element | React.ReactNode | React.FunctionComponent;

to:

  Component?: React.FunctionComponent;

in MyRoute type.

Why? JSX.Element it is something like, <div>jsx element<div> but your component must be a React component, e. g. function.

CodePudding user response：

this is the error

I changed the type of this Component but it also like this