11

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

反応の問題は、私のアプリケーションの一部のページで反応ルーターが機能していて、一部のページで次のようなエラーが発生することです:「未定義のプロパティ 'プッシュ'を読み取れません」.

私は反応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');
    }
  }

}

誰でもこれで私を助けることができますか？ありがとう。

4

7 に答える 7

15

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

withRouterを提供する上位コンポーネントの使用を検討してくださいreact-router(以降v2.4.0)。

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

Appクラスは props を介して受信しrouter、安全に行うことができますthis.props.router.push('/');。

于 2016-08-27T20:22:33.640 に答える
4

あなたのアプリには、あなたに与えている小道具に Router のインスタンスがありませんCannot read property 'push' of undefined。

withRouter をインポートして Router のインスタンスを取得していると仮定しているので、引き続き使用したい場合はコンポーネントをラップする必要があります... (例はこちらですが、推奨されていません)

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

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

ドキュメントはこちら

お役に立てれば！

于 2016-08-27T18:08:55.887 に答える
1

hashHistory を使用しています。次のコードは機能するはずです。

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

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

<Route path="/" component={App}>
于 2016-08-27T18:11:39.537 に答える
1

以下のコードを試して、機能し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から詳細情報を取得することもできます 。

于 2016-08-27T18:13:15.283 に答える