【react】react-routerにて画面遷移と「TypeError: this.context.router is undefined」の対応

はじめに

今回やりたかったことは
component内で何かボタンとか押されたときに別のページへ遷移させるということをしたかったのですが
「TypeError: this.context.router is undefined」とエラーが・・・

対応

修正前

export default class Page1 extends React.Component {
    movePage2() {
        this.context.router.push("page2");
    }
    render() {
        return (
            <div>
            <div>hello world3</div>
            <button onClick={this.movePage2.bind(this)}>Move Page2</button>
            </div>
        );
    }
}

修正後

export default class Page1 extends React.Component {
    movePage2() {
        this.context.router.push("page2");
    }
    render() {
        return (
            <div>
            <div>hello world3</div>
            <button onClick={this.movePage2.bind(this)}>Move Page2</button>
            </div>
        );
    }
}

// ★ココを追加
Page1.contextTypes = {
    router: React.PropTypes.object
};

なるほど・・・また慣れるまで色々時間かかりそうです

以上です