web-dev-qa-db-ja.com

react-router "未定義のプロパティ 'Push'を読み取れません"

私は反応してルータを反応するのはかなり新しいです。

Reactの問題は、私のアプリケーションのいくつかのページでreact-routerが機能していて、「undefinedのプロパティ 'Push'を読み取れません」というエラーが発生することです。

反応0.14.1を使用しています

私のルーティングコードは次のようになります。

render(
<Router history={hashHistory}>
  <Route path="/" component={Loginpanel}/>
  <Route path="Index" component={Index}/>
  <Route path="Form" component={Form} />
  <Route path="Checkindex" component={Index}/>

  <Route path="Signup" component={Signup}/>
  <Route path="Admin" component={Admin}/>
  <Route path="AdminEditDetails" component={AdminEditDetails}/>
  <Route path="AdminDetails" component={AdminDetails}/>


</Router>,
document.getElementById('js-main'));

私のコンポーネントは今のようです：

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.Push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

誰かがこれを手伝ってくれる？ありがとう。

javascriptreactjsreact-routerreact-router-component
7
user6730596

アプリの小道具には、_Cannot read property 'Push' of undefined_を与えるルーターのインスタンスがありません。

WithRouterをインポートしてルーターのインスタンスを取得することを想定しているので、それを使用したい場合はコンポーネントをラップする必要があります...（例 here が推奨されていません）

代わりに、プログラムでナビゲートするためのより良いアプローチは、

componentWillMountライフサイクルイベントのimport { hashHistory } from 'react-router;' ... hashHistory.Push('/');。

ドキュメントは here です

お役に立てれば！

3
Patrick Pei

_react-router_から直接hashHistoryを使用することは確かにオプションですが、ユニットテストを少し面倒にします。ブラウザ履歴は通常、実行されるコンテキストテストでは利用できません。グローバルAPIをモックアウトするよりも、プロップをモックアウトする方が簡単です。

_react-router_が提供するwithRouter高次コンポーネントの使用を検討してください（_v2.4.0_以降）。

_import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);
_

Appクラスは、propsを介してrouterを受け取り、this.props.router.Push('/');を安全に実行できます。

7
ivarni

部分コンポーネントを使用していて、<Header />のように呼び出す場合は、<Header {...this.props} />に置き換える必要があります。

5
Jitendra Suthar

HashHistoryを使用しています。次のコードは動作するはずです。

import { hashHistory } from 'react-router';
hashHistory.Push('/');

ルートルートも定義する必要があります。

<Route path="/" component={App}>
0
vijayst

以下のコードを試して、router propsが機能しているかどうか

componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
    console.log("here comes");
  if(this.props.router !== undefined) {
    this.props.router.Push('/');
  } else {
    console.log(this.props.router);
  }
}
else{
    console.log('work normally');
}
}

また、以下のURLから詳細情報を取得するために、それらのドキュメントにアクセスできます https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

0
Md.Estiak Ahmmed