【react】Tabで囲んだページ間で画面遷移を行う方法│株式会社シーポイントラボ

お題

親コンポ―ネントでに囲まれた子コンポーネント内でページ遷移を行う

今回やりたかったのは、親をタブリストで子をページとした構成のコンポーネント

から別ページに遷移する作業。でしたが、push遷移が上手くいかず以下のエラーが発生。

TypeError: Cannot read property ‘push’ of undefined

reactソースコードは以下のような構成になります。

親ページ

<Tabs
   onSelect={this.handleSelect}
   selectedIndex={this.state.selectedIndex}>
   <TabList>
     <Tab>メイン画面</Tab>
     <Tab>サブ画面</Tab>
   </TabList>
   <TabPanel><main /></TabPanel>
   <TabPanel><sub /></TabPanel>
</Tabs>

※mainページがありますが今回の説明には使いません

subページ

import React, { Component } from 'react';
import { withAppContext } from '../hocs/WithAppContext';

class Sub extends Component {
  constructor(props) {
    super(props);
  }
  goBackPage() {
    this.props.history.push('/about');
  }
}
export default withAppContext(Sub);

原因はこのsubページの中のwithAppContextという関数になりました。

色々調べた結果、子コンポーネントで遷移をする場合はwithAppContextではなく

withRouterでラップする必要があることが分かりました。。

※少なくともReactRouterv4では、コンポーネントをwithRouterでラップする必要があります。

これを以下のように変更してビルド後遷移ができれば成功になります。

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class Sub extends Component {
  constructor(props) {
    super(props);
  }
  goBackPage() {
    this.props.history.push('/about');
  }
}
export default withRouter(Sub);