Typescript反应路线中的惰性负载组件

时间:2018-11-20 20:13:58

标签: reactjs typescript

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

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最好的地方来询问/查找有关打字稿的信息/做出反应?

1 个答案:

答案 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约束