Programmatic Navigation

React

今回のゴール

Image from Gyazo
とんぺい
とんぺい

師匠こんばんは〜。

今日も、CRUDアプリケーションの続きを学びに来たブゥ!

師匠
師匠

とんぺいくん、こんばんは。

前回は作成したItemと、Item投稿者を結びつける方法を学習したね。今回はhistoryを用いたProgrammatic Navigationを学んでいくよ。

とんぺい
とんぺい

Programmatic Navigationってなんだブゥ?

なんだか英語で書かれると、すごくかっこいい響きに聞こえるブゥ!

師匠
師匠

Programmatic Navigationというのは、プログラム上で自動的に処理されるページ遷移機能のことだよ。今回はその機能を使って、Itemの作成に成功したら、自動的にItem一覧ページに遷移するようにしよう。

とんぺい
とんぺい

承知しましただブゥ!

ところで、今回はどのようなディレクトリ構成になるんだブゥ?

ディレクトリ構成 & パッケージ

師匠
師匠

今回のディレクトリ構成は以上のようになるよ。

特に新しいパッケージは追加しないので、どのファイルを修正するのかを事前に確認しておこう。

とんぺい
とんぺい

了解しました〜

どこのファイルを修正するか確認できたブゥ!

今回のKey Point

師匠
師匠

今回のKey Pointであるhistoryについて学ぼう。

historyには以下の3つのメソッドが準備されているよ。

  1. createBrowserHistory
  2. createHashHistory
  3. createMemoryHistory
とんぺい
とんぺい

ほぅほぅ。

それぞれ何が違うんだブゥ?

師匠
師匠

まずは、createBrowserHistoryの説明をしよう。

これはHTML5 history APIをサポートしているWebブラウザでhistoryオブジェクトを作成するよ。

createBrowserHistoryを用いるとhistory.locationオブジェクトが以下のように作成されるよ。

とんぺい
とんぺい

なるほど!

createBrowserHistoryはWebブラウザでサービスを使ってもらう時に、利用すると覚えておけばいいブゥね!

師匠
師匠

次はcreateHashHistoryだね

これはwindow.locationを利用しているから、古いブラウザもサポートしなければならない場合は、こちらを利用する必要があるんだ。

createHashHistoryを用いるとhistory.locationオブジェクトが以下のように作成されるね。

とんぺい
とんぺい

ほぅほぅ。

pathnameのところにURLの#以下のところが保存されているブゥ!

師匠
師匠

最後にcreateMemoryHistoryについて説明しよう。

これはtest環境やmobileアプリ環境など、DOMが無い環境で使用されるメソッドだね。

とんぺい
とんぺい

ふんふん。

スマホアプリなどのDOMが無い環境ではcreateMemoryHistoryを使うと…

師匠
師匠

今回はこの3つの中でも、createBrowserHistoryを用いて実装を進めていくよ。では、早速実装に進もう。

とんぺい
とんぺい

了解だブゥ〜!

実装しよう!

src/history.js

師匠
師匠

src配下に新しくhistory.jsという名前でファイルを作成しよう。

historyはすでに、react-dom-routerを追加時に同時に追加されているので、新しくterminal画面で追加する必要は無いよ。

src/components/App.js

師匠
師匠

ここは、実際にページ遷移の記述をしているファイルだね。

まず、先程作成したhistoryをimportしよう。そして、Routerにhistoryを持たせるために、BrowserRouterの箇所をRouterに変更しているね。

actions/index.js

師匠
師匠

最後に、Action creatorの中身を変更しよう。

historyファイルをimportして、createItem()の中にhistory.push("/")と記述しよう。こうすることで、Itemの作成が終わった直後に自動的にトップページに遷移されるんだ。

とんぺい
とんぺい

なるほどなるほど。

Webサービスで自動的なページ遷移を行いたい場合には、history.push()を用いればいいんだブゥね!

師匠
師匠

そうだね。では最後に今回のまとめをして終わりにしよう。

次回は投稿したItemを編集する機能を実装するから、お楽しみに。

とんぺい
とんぺい

今日も楽しかったブゥ!

ありがとうございました!

まとめ

  • historyを用いることで、ユーザのアクションなしにページ遷移が行える
  • historyには3つのメソッドが存在するので、用途に応じて使い分ける

コメント

  1. […] 前回は、historyを用いたProgrammatic Navigationを学んだね。 […]

タイトルとURLをコピーしました