[React]~Ambassador画面4:ヘッダーコンポーネントの実装~

こんにちは、KOUKIです。

今回は、ヘッダーコンポーネントの実装をします。

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

前回

前回は、ナビゲーションの実装を行いました

事前準備

ファイル

ヘッダーコンポーネントの変更

まずは、以前作成したHeader.tsxに実装しているヘッダーコンポーネントのコンテンツを変えてみましょう。

Redux Storeへ接続

ヘッダーコンポーネントもRedux Storeへ接続し、Stateの値を取得できるようにしましょう。

表示の切り替え

ナビゲーションの時と同様に、ログイン済みの場合は、ユーザー情報を表示するようにします。

Userモデルに、revenueを追加します。

また、現状ログアウトするとログインページに遷移してしまうので、前回作成したナビゲーションからリダイレクト処理を削除し、ユーザー情報を設定する処理を追加します。

プロファイルページの作成

プロファイルページを作成していなかったので、この機会に作成しましょう。

内容は、Admin画面で実装した時のものとほぼ一緒です。

このページへのルートを設定します。

バグの修正

ページを更新後、「$undefined」になりました。これの修正を行いましょう。

Layout.tsxを修正します。

URLがルートかbackend以外の場合は、Headerコンポーネントを非表示にしました。

次回

次回は、StatsとRankingを実装しましょう

Reactまとめ

記事

参考書籍


ソースコード

Layout.tsx

Nav.tsx

App.tsx

Layout.tsx

user.ts

Header.tsx

コメントを残す