Typescript React Lazy加载路由中的组件

Question

我正在尝试延迟加载这样的组件：

const NewPost = React.lazy(() => import('./NewPost/NewPost'));

然后我想把它装载到这样的路线中：

<Route 
path="/new-post" 
render={() => (
<Suspense fallback={<div>Loading...</div>}>
<NewPost />
</Suspense>
)} 
/>

我的NewPost是这样定义的：

interface INewPostProps extends RouteComponentProps<any> {}
interface INewPostState {
title: string;
}
class NewPost extends React.Component<INewPostProps, INewPostState> {

但我得到了这个错误：

类型"｛｝"不可分配给类型"INewPostProps"。类型"｛｝"中缺少属性"history"。

指的是这条线：内部路线=>暂停。

我错过了什么？

PS：我认为询问/查找有关打字脚本/反应的信息的最佳位置是什么？

Answer 1

您的NewPostReact组件需要来自RouteComponentProps的属性，但在渲染<NewPost />时没有设置它们

路由render方法接收您忽略的道具，您可以这样重写：

<Route
path="/new-post"
render={(props) => (
<Suspense fallback={<div>Loading...</div>}>
<NewPost {...props} />
</Suspense>
)}
/>

回想一下，Routerender方法采用React.SFC，这是您的匿名箭头函数，它接收由react router 注入的道具

这里的props变量将被键入为RouteComponentProps<any, StaticContext, any>，因此您可以将它们扩展到NewPost实例中，以满足其道具约束