実現したいこと
- クラスコンポーネント のビューから react-router-redux を使ったページ遷移の Action を生成したい。コーディングの仕方が分からない。
問題
ページ遷移のボタンを配置したいコンポーネントが MaterialUI のソースをコピーした ClassComponent で、 FunctionalComponent であれば、参考書を読んで記述したことはありますが、ClassComponent の場合、どうすれば良いのか分からないです
前提
Hoge.js
の該当のコンポーネントはクラスコンポーネントである。- 1つのコンポーネントは、
redux 管理用 containers/Hoge.js
レンダリング用 components/Hoge.js
に分割している。
- おおもとの
index.js
に
ルーティング先のコンポーネント情報が記載されており、<Provider>
から containers/Hoge.js
に store 情報が流れる。
jsx
1<Provider store={ store } > 2 <ConnectedRouter history={ history } > 3 <Route path="/hoge" component={Hoge} /> 4 <Route path="/fuga" component={Fuga} /> 5 </ConnectedRouter> 6</Provider>
- 現状、
containers/Hoge.js
に直接import { push } from 'react-router-redux'
して、ページ遷移アクションを定義している
jsx
1import { connect } from 'react-redux'; 2import { push } from 'react-router-redux'; 3import Hoge from '../components/Hoge'; 4 5const mapDispatchToProps = dispatch => { 6 redirectToFuga: () => dispatch(push('/Fuga')), 7} 8export dafalut connect( null, mapDispatchToProps )( Hoge ); 9
あなたの回答
tips
プレビュー