reactjs 与 typescript React:类型“History”上不存在属性“push”

okxuctiv  于 2022-12-29  发布在  React
关注(0)|答案(3)|浏览(365)

我试图通过推入历史对象来导航离开视图。但是当我试图将路线推入它时,我收到一条错误消息:

  • 类型“History”上不存在属性“push”。*
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>
  )  
}

但没有成功。

cqoc49vn

cqoc49vn1#

更新:我发现了一种新的方法来做这种类型的事情。与b4相同,你需要安装它们的类型:
1.-第一个月
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>
        )
    }
}

我知道发生了什么,希望你还需要它。
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) => {}
i1icjdpr

i1icjdpr2#

您在此处何处定义了history?有一个全局window.history,它是一个Web标准。如果您要使用react-router history,它将作为一个属性传递。请尝试使用props.history.push()
组件必须从react router接收history属性,所以它应该是Route组件的直接子组件,或者你必须通过其父组件传递属性。

ct3nt3jp

ct3nt3jp3#

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

import  { Redirect } from 'react-router-dom'

在组件中定义状态

this.state = {
  loginStatus:true
}

而不是在你的render方法中

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

编辑:使用此.props.历史记录

我发现你的代码中缺少了两样东西。一是你的登录方法绑定。绑定你的方法,这样你就可以访问类的this。其他的东西是使用withRouter HOC。withRouter将给予你访问这个.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);

相关问题