与打字稿反应：“历史”类型上不存在属性“推送”

Posted 2023-02-21

【中文标题】与打字稿反应：“历史”类型上不存在属性“推送”

【英文标题】：React with Typescript: Property 'push' does not exist on type 'History'

【发布时间】：2018-12-11 15:22:15

【问题描述】：

我试图通过推入历史对象来离开视图。但是，当我尝试将路由推入其中时，会收到一条错误消息：

“历史”类型上不存在“推送”属性。

  render()
    return (
        <div className="loginWrapper">
    withRouter((history) => (<button onClick=()=>history.push('/home') className="btn btn-primary">Pieteikties</button>))
  </div>
    )  

我能做些什么来解决这个问题？

编辑：

我也试过这个：

logIn()
  this.props.history.push('/new-location')

使用这样的组件：

 render()
    return (
        <div className="loginWrapper">
<button onClick=this.logIn className="btn btn-primary">Pieteikties</button>
</div>
    )  

它没有用。

【参考方案1】：

你在哪里定义history？有一个全球性的window.history，它是一个网络标准。如果你想使用react-router history，它作为一个道具传递。请改用props.history.push()。

组件必须从 react 路由器接收 history 属性。因此，它应该是 Route 组件的直接子代，或者您必须通过其父代传递 props。

【讨论】：

我不明白您的编辑。 logIn() 函数是什么？ this.props 是从哪里得到的？尝试在 render 方法中使用this.props.history.push。

logIn() 函数是该组件具有的方法。我尝试在渲染方法中使用 this.props.history.push 失败，因为 this.props.history 未定义。

组件必须从 react 路由器接收 history 属性。例如，它应该是 Route 组件的直接子代，或者您必须通过它的父代传递 props。这是在 react router 的文档中解释的。 reacttraining.com/react-router/web/api/Route/route-props

【参考方案2】：

在 React 16 及更高版本中，您可以使用 Redirect from 'react-router-dom'。在您的情况下，如果您使用重定向而不是历史记录，您将获得相同的结果。

import   Redirect  from 'react-router-dom' 

在你的组件中定义状态

this.state = 
  loginStatus:true

比你的渲染方法

render () 
if(this.state.loginStatus)
    return <Redirect to='/home'  />
 
return(
 <div> Please Login </div>
 )

编辑：使用 this.props.history

我发现您的代码中缺少两件事。一种是你的登录方式 捆绑。绑定您的方法，以便您可以访问类的this。 其他事情是使用withRouter HOC。 withRouter会给你 访问 this.history 道具。如下所示。

import React from "react";
import  withRouter  from "react-router";

class MainClass extends Component 
  constructor(props) 
      this.login = this.login.bind(this)
   

  logIn()
      this.props.history.push('/new-location')
   

   render()
     return (
       <div className="loginWrapper">
          <button onClick=this.logIn className="btn btn- 
          primary">Pieteikties</button>
      </div>
      )  
    

 export default withRouter(MainClass);

【讨论】：

重定向有一些注意事项，例如无法使用浏览器的后退按钮。

我更新了答案。你可以试试这个。如果您现在收到错误，请告诉我。

【参考方案3】：

更新： 我找到了一种新方法来做这种事情。 与 b4 相同，您需要安装它们类型：

1.- npm i react-router react-router-dom

2.- npm i -D @types/react-router @types/react-router-dom

import React from "react";
import  RouteComponentProps  from "react-router-dom";

interface MyComponentProps extends RouteComponentProps 
 someOfYourOwnProps: any;
 someMorePropsIfNeedIt: any;


interface MyComponentState 
  someProperty: any;
  another: any;


export class MyComponent extends React.Component<MyComponentProps, MyComponentState> 

    public state: MyComponentState;
    public constructor (props: MyComponentProps) 
        super(props);

        this.state = 
            someProperty: "",
            another: ""
        
    

    public onClickHandler (evt: React.MouseEvent<htmlButtonElement, MouseEvent>): void 
        evt.preventDefault();
    

    public componentDidMount () 
        this.props.history;
    
   public render (): React.ReactElement<MyComponentProps> 
        return (
            <div>trol</div>
        )
    

---

hihitl 我知道发生了什么。希望你仍然需要它。

1.- npm i react-router react-router-dom

2.- npm i -D @types/react-router @types/react-router-dom

import React from "react";
import  History, LocationState  from "history";

interface MyComponentProps 
 someOfYourOwnProps: any;
 history: History<LocationState>;
 someMorePropsIfNeedIt: any;

如果它是一个类，那么在你的组件上做

class MyComponent extends Component<MyComponentProps, > 

如果是函数式

const MyComponent = (props: MyComponentProps) => 

【讨论】：

当我想在组件中推送历史记录时，这是我在 create-react-app + typescript 类型设置中唯一可行的解​​决方案。

对于我的 cra typescript 应用程序的 import History, LocationState from "history";和历史：历史；正是我所需要的。谢谢！

interface MYINTERFACE extends RouteComponentProps 为我工作