[React]~MovieApp3: ~ルーティング処理(Advance)の実装~

こんにちは、KOUKIです。

ReactでMovie Appの開発を行なっています。

今回は、以前実装したルーティングのより発展的な使い方を見ていきましょう。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

ページのコンポーネント化とReactのStateを実装しました。

事前準備

フォルダ/ファイル

ルーティング処理(Advance)

個別ページへの遷移

Movie一覧から個別ページに遷移する処理を実装します。

URLとしては、以下を想定しています。

上記の「1」は、IDを示しています。

このidをURLから取得するには、以下の実装を行います。

Routeタグの中でrenderプロパティを定義し「props」を渡すことで、個別ページ(Movie)にprops情報を渡すことが可能です。

そして、「props.match.params」からidを取得できます。

動作確認のため、前回実装したMovie一覧のリストにLinkを貼りましょう。

これで、個別ページへ画面遷移ができるようになりました。

カテゴリーページの作成

カテゴリーページを作成しましょう。

CategoryPageに設定した「path, url」には、同じ値が入ります。ここでは、「/by-category」が該当しますね。

これでカテゴリーページ -> 個々のカテゴリーページへ画面遷移ができるようになりました。

リファクタリング

Movieページのコンポーネント化

Movieページをコンポーネント化します。

App.tsxも修正します。

次回

次回は、Go言語でバックエンドの処理を実装します

記事まとめ

記録

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

App.tsx

Movies.tsx

OneMovie.tsx

Categories.tsx

コメントを残す