reactjs - React .Net Core 不允许渲染根组件
问题描述
我已经在使用 typescript .tsx 的 Visual Studio .Net Core 中设置了 ReactJs 我已经修改了由.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
如果我替换文件夹 ClientApp->AppApp
下的代码,上面的代码工作正常clientApp
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>
);
}
}
解决方案
推荐阅读
- smtp - PHPMailer 和谷歌 SMTP 中继。收件人收到其他客户电子邮件的重复电子邮件过多
- android - Android:为 WallpaperService 使用 WebView
- amazon-web-services - 当我使用 EC2 实例训练神经网络时,我需要在哪里存储训练数据集?
- sql - 如何在 SQL 中获取具有不同值的列的条目
- javascript - 如何修复 React Router v4 页面过渡动画错误?
- node.js - How to Send Images as Attachments with Mailgun and Node.js?
- javascript - 在我的网站上使用 google 登录后,如何显示用户名和个人资料图片?
- vue.js - 无法访问数组对象
- c# - 如何修复“System.ArgumentNullException:'值不能为空。参数名称:实体'”
- r - How do I reorganize my dataframe to run Krippendorff's alpha?