React .Net Core не позволяет рендерить корневой компонент

Question

Я установил ReactJs в Visual Studio .Net Core, который использует машинопись .tsx Я изменил код по умолчанию, который создается .Net Core с моими собственными Компонентами. Я заменил свои собственные компоненты. Когда я добавляю компонент из папки компонентов, я получаю любую ошибку.

ClientApp-> route.tsx

import  Home  from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
      <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
</Layout>;

Приведенный выше код работает нормально, если я заменю Home на App, который находится в папке clientApp ClientApp-> App

import App from './App';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';

export const routes = <Layout>
    <Route exact path='/' component={ App } />
      <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
</Layout>;

Я получаю эту ошибку

ERROR in [at-loader] ./ClientApp/routes.tsx:9:12 
    TS2322: Type '{ exact: true; path: "/"; component: typeof App; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
  Type '{ exact: true; path: "/"; component: typeof App; }' is not assignable to type 'Readonly<RouteProps>'.
    Types of property 'component' are incompatible.
      Type 'typeof App' is not assignable to type 'StatelessComponent<RouteComponentProps<any> | undefined> | ComponentClass<RouteComponentProps<any...'.
        Type 'typeof App' is not assignable to type 'ComponentClass<RouteComponentProps<any> | undefined>'.
          Type 'App' is not assignable to type 'Component<RouteComponentProps<any> | undefined, ComponentState>'.
            Types of property 'setState' are incompatible.
              Type '{ <K extends never>(f: (prevState: {}, props: {}) => Pick<{}, K>, callback?: (() => any) | undefi...' is not assignable to type '{ <K extends never>(f: (prevState: ComponentState, props: RouteComponentProps<any> | undefined) =...'.
                Types of parameters 'f' and 'f' are incompatible.
                  Types of parameters 'props' and 'props' are incompatible.
                    Type '{}' is not assignable to type 'RouteComponentProps<any> | undefined'.
                      Type '{}' is not assignable to type 'RouteComponentProps<any>'.
                        Property 'match' is missing in type '{}'.

Если я заменяю какой-либо компонент из Компонента, он работает нормально. Почему это не Импортирование компонента из папки ClientApp? Я также проверил относительный путь компонента приложения? Спасибо.

ClientApp / App.js

import * as React from 'react'; 
import Home from './components/Home';
import PopularProject from './components/PopularProject';
import ProjectCard from './components/ProjectCard';
import SocialShare from './components/SocialShare';
import Bloggers from './components/Bloggers';
import Footer from './components/Footer';


export default class App extends React.Component {
    render() {
        return (
            <div>
                <Home />
                <PopularProject />
                <ProjectCard />
                <SocialShare />
                <Bloggers />
                <Footer />
            </div>
        );
    }
}

Компоненты / NavMenu.tsx

import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';

export class NavMenu extends React.Component<{}, {}> {
    public render() {
        return <div className=''>

                <div className='navbar-header'>


                </div>
                <div className='clearfix'></div>
                <div className=''>
                    <ul className=''>
                        <li>
                            <NavLink to={ '/' } exact activeClassName='active'>
                                 App
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to={ '/counter' } activeClassName='active'>
                                Counter
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to={ '/fetchdata' } activeClassName='active'>
                               Fetch data
                            </NavLink>
                        </li>
                    </ul>
                </div>

        </div>;
    }
}

Компоненты / Home.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import Header from '../components/Header';
import { NavMenu } from '../components/NavMenu';

export default class Home extends React.Component<any, any> {
     render() {
         return (

             <div className="container-fluid banner text-center">
                     <Header />
                 <NavMenu />
                 <div className="row "> 

                 <div className="col-md-12">
                     <h1 className="submit-project">Submit Your Project</h1>
                     <button type="button" className="btn btn-large btn-inline btn-success start-today">Start Today</button>
                </div>
                 </div>                 
                 </div>

         );
    }
}