Question

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

类型“历史记录”上不存在属性“ 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>
    )  
}

那没有用。

Answer 1

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) => {}

Answer 2

您在何处定义history？有一个全局window.history，它是一个网络标准。如果您想使用react-router history，它将作为道具传递。尝试使用props.history.push()。

Answer 3

在React 16及更高版本中，您可以从'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 个答案: