history.push();でアクションを起こした時にページ遷移をする

概要

今回はhistory.push();を使ってページ遷移を行います。
ページ遷移といえば

<Link to="/">ホームへ</Link>

のようにしてクリックしたらホームへ行くみたいなものですが、今回はフォームを用意して文字を送信したらページ遷移をすることを目標にします。

実装していく

npm install --save react-router-dom

必要なものとしてreact-router-domをインストールします。

次に準備としてヒストリーを作ります。

src/history.js

import history from 'history/createBrowserHistory';

export default history();

App.jsを見てみましょう。

src/App.js

import React from 'react';
import { Router, Route } from 'react-router-dom';

import history from '../history';
import PageOne from './PageOne';
import PageTwo from './PageTwo';

const App = () => {
  return (
    <div>
      <Router history={history}>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/action" exact component={PageTwo} />
        </div>
      </Router>
    </div>
  );
};

export default App;

コンポーネントとしてPageOneとPageTwoを持っておりそれぞれpathをつけています。
ポイントはRouterにhistoryを持たせています。
ここをBrowserRouterでラップしてしまうとエラーが出てしまうので気をつけてください。

PageOneはダミーのページなので置いておいて、PageTwoをみてみましょう。

src/components/PageTwo.js

import React from 'react';
import history from '../history';

class PageTwo extends React.Component {
  changePage = () => {
    history.push('/');
  }

  render() {
    return (
      <form onSubmit={this.changePage}>
        <input type="text" />
      </form>
    );
  }
};

export default PageTwo;

history.push()に飛ばしたいpathを入れてあげるとページ遷移してくれます。
ここでは送信するとPageOneコンポーネントに飛んでいます。

まとめ

今回はhistory.push()についてみてみました。
参考になれば幸いです。