React .Net Core不允许呈现根组件

Question

我在Visual Studio .Net Core中设置了ReactJs，它使用了typescript .tsx我修改了由.Net Core和我自己的组件创建的默认代码。我已经替换了自己的组件。当我从组件文件夹中添加组件时，我得到了任何错误。

ClientApp-＆GT; 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-＆GT;应用

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 '{}'.

如果我用Component中的任何组件替换它工作正常。为什么不从ClientApp文件夹导入组件？我还检查了App组件的相对路径？感谢。

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>

         );
    }
}