浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

お題

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

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

から別ページに遷移する作業。でしたが、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);

まとめ

withAppContext:親コンポーネント間で遷移するときに必要

withRouter:子コンポーネント→親コンポーネント間で遷移するときに必要

  • この記事いいね! (1)