Reactjs react路由器v4的路由不会将其道具传递给react类型脚本中的组件

我刚开始使用React Router v4，无法使用Browserrouter的历史记录。例如，当我尝试访问this.props.history.push/I时，出现错误：

TS2339:类型“Readonly&Readonly”上不存在属性“history”

我将React Router v4与Browserrouter一起使用，并将React与Typescript一起使用。似乎React路由器路由中的三个道具位置、历史、匹配没有传递到它的组件。 我是否对Typescript或React路由器有任何错误

index.tsx

注册服务人员

示例组件GotNoHistory.tsx

更新

我发现了RouteComponent道具。我把这些道具添加到我的课堂GotNoHistory中，错误就消失了。这是解决问题的正确方法吗

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>, any> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}

Chris解决方案的更新

---

导致几乎相同的错误：TS2339:类型“Readonly&Readonly”上不存在属性“history”

您应该可以在路由组件中访问它，但您需要让Typescript知道您希望它们作为道具：

import { Route, Redirect } from 'react-router-dom'
import React from 'react'


interface IProps {
}

interface IState {
}

export default class GotNoHistory extends React.Component<IProps & Route, IState> {
  render() {
      this.props.history.push("/");
  }
}

---

行IProps&Route是指预期的道具是我自己的道具IProps的组合，不管你怎么定义，可能什么都没有，还有路由道具

您应该可以在路由组件中访问它，但您需要让Typescript知道您希望它们作为道具：

import { Route, Redirect } from 'react-router-dom'
import React from 'react'


interface IProps {
}

interface IState {
}

export default class GotNoHistory extends React.Component<IProps & Route, IState> {
  render() {
      this.props.history.push("/");
  }
}

行IProps&Route是指预期的道具是我自己的道具IProps的组合，不管你怎么定义，可能什么都没有，还有路由道具

我自己解决

我的解决方案是将路线道具添加到我的道具类型中

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}

对于那些像我一样不知道这意味着什么的人：

参数为道具类型。 所以之前它只是React.Component，这意味着我们不希望从我的路由器得到任何道具。所以这是行不通的

我自己解决

我的解决方案是将路线道具添加到我的道具类型中

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}

对于那些像我一样不知道这意味着什么的人：

参数为道具类型。

---

所以之前它只是React.Component，这意味着我们不希望从我的路由器得到任何道具。所以这是行不通的

您的解决方案仅适用于React Router的重定向方法，但不适用于我对历史的直接访问。重定向方法也适用于我现有的原始实现。所以这并不能解决问题。但是你能反应一下吗，好吗？我告诉Typescript期望RouteComponentProps？谢谢你复制了你的示例。我的类型脚本错误TS2339:类型“Readonly&Readonly”上不存在属性“history”，对于“history”仍然存在，就像在我的原始实现中一样。不幸的是，它仍然不起作用。我得到了与原始实现中几乎相同的错误，但错误的最后一部分已更改为新的props。奇怪-它抱怨IProps，但您已将其重命名为props而不是IProps。有些东西没有排好…抱歉，在发布错误时输入了错别字。由于tslint规则，我不得不删除代码中的前导I。编辑更新，错误和代码匹配您的解决方案仅适用于React Router的重定向方法，但不适用于我对历史的直接访问。重定向方法也适用于我现有的原始实现。所以这并不能解决问题。但是你能反应一下吗，好吗？我告诉Typescript期望RouteComponentProps？谢谢你复制了你的示例。我的类型脚本错误TS2339:类型“Readonly&Readonly”上不存在属性“history”，对于“history”仍然存在，就像在我的原始实现中一样。不幸的是，它仍然不起作用。我得到了与原始实现中几乎相同的错误，但错误的最后一部分已更改为新的props。奇怪-它抱怨IProps，但您已将其重命名为props而不是IProps。有些东西没有排好…抱歉，在发布错误时输入了错别字。由于tslint规则，我不得不删除代码中的前导I。编辑更新后，错误与代码匹配。我不知道我可以有多个这样的道具。手动将其添加到组件道具中是否仍有必要？谢谢。我不知道我可以有多个这样的道具。手动将其添加到组件道具中是否仍有必要？

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}