web-dev-qa-db-ja.com

React TypeScriptの場合：プロパティ '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>
    )  
}

そしてそれはうまくいきませんでした。

javascriptreactjstypescriptroutingreact-router
4
gfels

ここでhistoryをどこに定義しましたか？グローバルな _window.history_ があり、これはWeb標準です。 react-router history を使用したい場合は、プロップとして渡されます。代わりにprops.history.Push()を試してください。

4
Håken Lid

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

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を使用

コードに欠けていることが2つあります。 1つは、ログインメソッドバインディングです。クラスの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);
2
Mustkeem K