react-routerでページ遷移機能を実装する

React
とんぺい
とんぺい

もう11月も終わりだブゥ〜。

時間が過ぎるのは早いなぁ。

時間を無駄にしないように、今日もしっかり勉強するブゥ!

師匠!こんにちは〜。

師匠
師匠

とんぺいくん。こんにちは。

前回はredux-thunkについて、ロジックの解説を行なったね。今回はreact-routerというものを使って、Reactアプリケーション内でページ遷移ができるようになろう。

とんぺい
とんぺい

おぉ!また新しいことが学べるブゥ!

よろしくお願いします!

今回のゴール

Image from Gyazo
師匠
師匠

今回は上に示す通りに、メニューを選択すると、それに紐づくURLのページに遷移する機能を実装するよ。

とんぺい
とんぺい

了解しましただブゥ。

今回はどんなディレクトリ構成になるんだブゥ?

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

師匠
師匠

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

そして、Reactアプリケーションでのルーティングを実現するために、react-router-domをインストールしておこう。

とんぺい
とんぺい

必要なファイルとパッケージのインストールも完了したし、準備は万端ブゥ!

師匠
師匠

Githubに今回のソースコードを載せているので、そちらも参考にしてくれ。

それでは、早速実装に取り掛かろう。

実装しよう!

index.js

師匠
師匠

ここはいつも通り。

特に解説するところはないね。

各CRUDコンポーネント

師匠
師匠

ここでは、ページ遷移先の各コンポーネントを作成しているよ。最終的にはそれぞれCRUD機能を実装するけれど、今回はページ遷移の方法を学ぶということで、各コンポーネントの名前を返すだけにしているよ。

Header.js

師匠
師匠

さて、ここからが今回の本題になるね。

ここでは、ページ遷移のメニューを表示するHeaderを作成しているよ。

react-router-domからLinkをimportして、遷移したい先のURLを『to』に記述しよう。

App.js

師匠
師匠

では最後に、App.jsを作成していこう。

ページ遷移を実装するためには、react-router-domから

・BrowserRouter

・Route

を取り込むよ。

とんぺい
とんぺい

うん。無事にimportできたことを確認したブゥ!

ページ遷移先の各コンポーネントとHeaderのimportも完了したブゥ!

師匠
師匠

では、BrowserRouterコンポーネントの中身にRouteコンポーネントを配置して、URLとそれに紐付けたいコンポーネントをそれぞれ『path』『component』に記述しよう。

とんぺい
とんぺい

Routeの中に『exact』っていう記述があるものとないものがあるんだけど、これの違いはなんだブゥ?

師匠
師匠

exactを記述することで、設定したURLが完全に一致した場合にのみ、紐づけられたコンポーネントが表示されるようになるよ。

とんぺい
とんぺい

なるほどぉ。

ちょっとexactを付けないで試してみようっと。

ぶぶぅ!全部のコンポーネントでItemListが表示されているブゥ!

Image from Gyazo
師匠
師匠

exactを記述しないと、今確認したように、前方一致でpathが含まれていれば、それに紐づけられているコンポーネントが表示されてしまうんだ。

とんぺい
とんぺい

なるほど。今回の場合は、ItemListがpath=”/”に紐づけられていて、他のコンポーネントを表示するpathにも”/”が含まれているから、どこでもItemListが表示されてしまうってことだブゥね!

師匠
師匠

その通り。複数のページで必要のないコンポーネントが表示されないように、pathの扱いには十分に注意しよう。

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

まとめ

  • Reactアプリケーションでページ遷移機能を実装したい場合はreact-router-domを使用する
  • react-router-domからimportしたLinkのtoに遷移したい先のURLを記述する
  • BrowserRouterコンポーネント内にRouteコンポーネントを記述することで、ページ遷移が実現する。
  • Routeコンポーネントのcomponentpathを設定することで、表示されるコンポーネントとURLが紐付けされる。
  • exaxtを記述することでpathとURLが完全一致している場合にのみ指定のコンポーネントが表示される。

コメント

  1. […] 前回はreact-router-domを用いて、URLに紐付いたページ遷移機能を実装したね。 […]

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