我正在尝试延迟加载这样的组件:
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”。 类型“ {}”中缺少属性“历史”。
参考以下行: 在Route => Suspense中。
我想念什么?
PS:我stackoverflow最好的地方来询问/查找有关打字稿的信息/做出反应?
答案 0 :(得分:1)
您的NewPost
React组件需要RouteComponentProps
中的属性,但是在渲染<NewPost />
时并没有设置它们
路线render
方法会收到您忽略的道具,您可以这样重写:
<Route
path="/new-post"
render={(props) => (
<Suspense fallback={<div>Loading...</div>}>
<NewPost {...props} />
</Suspense>
)}
/>
回想一下,Route render
方法采用了React.SFC
,这是您的匿名箭头函数,它接收由react-router注入的道具
此处的props
变量将被键入为RouteComponentProps<any, StaticContext, any>
,因此您可以将它们扩展到NewPost
实例上,以满足其prop约束