react-routerを使用した画面遷移を実装したい

Question

解決したいこと

今回作成しているコードは簡単に表すとApp.jsは以下のような構成になっています。定義したBBBBBをAppクラス内で引数を与えて表示するといったイメージなのですが、BBBBBのimgタグにonClickイベントを追加して別で準備しているページを表示させたいです。

class App extends React.Component{
　　・
　　・
　　・
    render() {
        return(
            <div>
                {this.state.trades.map(e =>
                    <BBBBB
                        name = {e.name}
                        price = {e.Price}
                    />
                )}
            </div>
        );
    }
}

const BBBBB = (name, price)  => (
            <div>
                <img src='./sample.png' alt='' />
                <div>
                    <Switch>
                        <Route exact path={"/detail"} component={Detail} />
                    </Switch>
                </div>
            </div>
);

やってみたこと

普段react-routerを使うときはクラス内でhandleClick関数を作ってthis.props.histry.push(PATH)みたいな感じで記述してonClickを実装していたのですが、今回はその手法が使えないのでどのようにしたらよいかわかりません。

どなたかご教示ください。よろしくおねがいします。

Answer 1

いくつか気になる点はあるのですが、 imgをLinkで囲むなどでは難しい想定なのでしょうか。

ルーティング
withRouter

Comments

[hello_whats_up]

とりあえずLinkで飛ぶことはできるのですが、onClickイベントでの遷移も作りたかったので質問させていただきました。