Typescript React延迟加载路由中的组件答案

【问题标题】：Typescript React Lazy load components in routeTypescript React延迟加载路由中的组件
【发布时间】：2019-04-23 08:37:21
【问题描述】：

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

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”。类型“{}”中缺少属性“历史”。

指的是这一行：路线内部 => 悬念。

我错过了什么？

PS：我 stackoverflow 是询问/查找有关打字稿/反应信息的最佳场所？

【问题讨论】：

标签： reactjs typescript

【解决方案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

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

【讨论】：