【React】「react-router」でLinkタグを使わないページ遷移の方法

昨日の記事に引き続き、今回もReactでのページ遷移の方法について。
前回は、Linkタグでのページ遷移について書きましたので、今回は関数内でのページ遷移方法についてです。

ちなみに、前回の記事はこちらから。

【React】「react-router」でのページ遷移の実装方法

今回参考にさせていただいた記事はこちらから。

react-routerのページ遷移をhandleで行う時にはwithRouterを使う – Qiita
https://qiita.com/junara/items/a4a98c27dc23fd53ebb9

ベースとなるページは前回の記事で作成したものを、ほぼそのまま流用します。

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import Detail from './Detail'
 
const App = () => {
  return (
      <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/about'>About</Link></li>
                <li><Link to='/friends/10'>Friends</Link></li>
                <li><Link to='/detail'>Detail</Link></li>
            </ul>
            <hr />
 
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/friends/:ids' component={Friends} />
            <Route path='/detail' component={Detail} />
        </div>
    </BrowserRouter>
  );
}
 
const Home = () => (
  <div>
    <h2>Home</h2>
    Homeページです
  </div>
)
const About = () => (
  <div>
    <h2>About</h2>
    Aboutページです
  </div>
)
const Friends = ({ match }) => (
  <div>
    <h2>Friends</h2>
    Friendページです{match.params.ids}
  </div>
)
export default App

追加しているのは、Detailページとそのページへのリンクです。

そして、そのDetailのページがこちら。

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

class Detail extends React.Component {
  handleToAboutPage = () => {
    this.props.history.push('/about')
  }

  render() {
    return (
      <div>
        <button onClick={this.handleToAboutPage}>
          aboutページへ
        </button>
      </div>
    )
  }
}

export default withRouter(Detail)

こちらはAboutページへ遷移するためのボタンが表示されたページです。

上記のコード通り、関数でページ遷移を行うときは、6行目の this.props.history.push([遷移先ページ]) を使います。
ポイントは、最後のexport defaultで指定している Detail を withRouter で囲っている点です。
ページ遷移を実装するときには、こちらの処理が必要になります。
なお、今回別ファイルでDetailページを作成したので、ベースとなるページの3行目にある通り、Detailページを import する作業をお忘れなく。

以上、Linkタグを使わずに、関数内でページ遷移を行う方法でした。
ただ、サンプルコードをそのままコピーしただけなので、ベースのページとは少し書き方が違っています。
ベースページでは、const を使っていますが、Detailページでは class を使っているんですよね。
Detailページもベースに合わせたいのですが、書き方が違うのか、const で宣言すると、エラーになってしまい…只今修正中です。
それとも、この書き方でなければいけない何かがあるのかも？
とりあえず、引き続き調査したいと思います。