형식 설명으로 대응: 속성 'push'가 유형 'History'에 없음

형식 설명으로 대응: 속성 'push'가 유형 'History'에 없음

역사 오브젝트 안으로 밀어넣어 시야에서 벗어나려고 한다.그러나 경로를 입력하려고 하면 다음과 같은 오류 메시지가 표시된다.

속성 'push'는 유형 'History'에 존재하지 않는다.

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

그리고 그것은 효과가 없었다.

업데이트: 나는 이런 종류의 일을 하는 새로운 방법을 찾았다.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>
        )
    }
}

---

히히틀 난 무슨 일이 일어나고 있는지 안다.네가 그것이 꼭 필요하길 바라.

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

정의한 위치history여기? 웹 표준인 글로벌이 있다.리액터-러터 이력을 사용하고자 한다면, 소품으로 전달된다.해보다props.history.push()대신에

구성 요소는 다음 정보를 수신해야 함history리액션 라우터에서 받침하다그래서 그것은 a의 직계자식이 되어야 한다.Route예를 들어, 구성 요소 또는 소품을 부모를 통해 전달해야 한다.

반응 16 이상에서 '반응-루터-돔'에서 리디렉션을 사용할 수 있다.이력 대신 리디렉션을 사용하면 동일한 결과를 얻을 수 있다.

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

구성 요소의 상태 정의

this.state = {
  loginStatus:true
}

렌더 방식보다

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

편집: 이.props를 사용하십시오.역사

네 코드에서 빠진 게 두 가지야하나는 로그인 방법 바인딩.액세스 권한을 얻을 수 있도록 메서드를 바인딩하십시오.this동급의다른 것은 사용이다.withRouterHORKORK.withRouter접근 권한을 줄 겁니다역사 소품아래처럼.

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);

참조URL: https://stackoverflow.com/questions/51152417/react-with-typescript-property-push-does-not-exist-on-type-history