React js他のページをリフレッシュしようとするとメインページにリダイレクト

Question

他のページをリフレッシュするときにメインページにリダイレクトする必要があります。ページリフレッシュのためのイベントリスナーを追加しようとしました。しかし、それは動作しませんと私はRouter.js?cf42:125 Uncaught RangeError: Maximum call stack size exceededブラウザで持っています。このエラーに対処する方法を教えてください。

import {browserHistory} from 'react-router'; 

class MyComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.onUnload = this.onUnload.bind(this); 
    } 

    componentDidMount() { 
     window.addEventListener('beforeunload', this.onUnload); 
    } 

    componentWillUnmount() { 
     window.removeEventListener('beforeunload', this.onUnload); 
    } 

    onUnload() { 
     browserHistory.push('/'); 
    } 

    render() { 
     ... 
    } 
} 

UPD：RangeErrorが固定されています。今すぐMyComponentのページはメインページにリダイレクトされますが、その後は再び開きます。私はリダイレクトがページの更新を止めないので、これが起こると思います。

Answer 1

あなたはonUnload()をバインドする必要があります - あなたのコンストラクタに次の行を追加します。

this.onUnload = this.onUnload.bind(this); 

あなたが反応-ルータやご自宅のコンポーネントを使用している場合はまた、リスナーのための正しいイベント名はonbeforeunload

Answer 2

ですパスは/

onUnload() { 
    this.context.router.push('/'); 
} 

ルートファイルが正しいことを確認してください。

const routes = (
<Route path="/" component={App}> 
<IndexRedirect to="/home" component{Home}/> 
    //all other routes 
</Route> 
)