[React]~Admin画面7:Linkページの実装~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、ユーザー一覧を実装をしました。今回は、Linkページの実装をします。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

フォルダ/ファイル

Link画面

以前、Link APIを作成しました。

このAPIは、ユーザーとオーダーした商品をLinkさせるための APIです。

リクエスト時に、ユーザーのIDを紐付けて飛ばし、該当するLinkデータを取得します。

今回は、ユーザーがオーダーした情報を確認できるLinkページを作成します。

LinkPropsの作成

Linkのモデルを作成しましょう。

Linkページの作成

続いて、Linkページを作成します。

なお、前回実装したUsersとほぼ同じであるため、説明は割愛します。

ルートの追加

「let linksUrl = users/${props.match.params.id}/links」は、Link APIのエンドポイントであり、真ん中の「${props.match.params.id}」は、Reactのルートに指定したidを渡せます。

App.tsxにルートを追加しましょう。

パスの中に「:id」を指定しており、これにより、先ほど示した「${props.match.params.id}」からIDとして取得できるようになります。

Linkページへのリンク

ユーザー情報の取得時に、IDも取得できるので、UserページからLinkページに遷移できるようにリンクを貼りましょう。

テーブルの最終列に「Button」を追加し、Linkページに飛べるようにしました。

検証

「http://localhost:3000/users」をブラウザから開き、VIEWボタンを押下すると、Linkページが表示されるようになります。

OKですね。

テーブルにデータが表示されない場合は、データが保存されていないのだと思います。

データを保存するページを作ると思うので、そこまでお待ちいただくか、APIへリクエストを送って、データを保存してから検証を行ってみてください。

登録するデータは結構あるので、大変かと思いますが…

次回

次回は、Productページを実装をしましょう。

Reactまとめ

参考書籍


ソースコード

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

Link.tsx

App.tsx

Users.tsx

Links.tsx

コメントを残す