[React]~Ambassador画面3:ナビゲーションの実装~

こんにちは、KOUKIです。Reactでアプリケーションを開発しています。

ナビゲーションを実装します。

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

前回

Admin画面の時にも実装した共通処理を作成しました。

ナビゲーション

BootstrapのHeadersを参考に、ナビゲーションを実装しましょう。

「docker-compose up」でコンテナを立ち上げ、「http://localhost:4000/」にアクセスします。

ナビゲーションを導入できました。

Redux Storeへ接続

ナビゲーションもRedux Storeへ接続します。
※Reduxは、前回導入しました

ログインするとユーザー情報がRedux Storeに格納されるので、そこから取得します。

ヘッダーの動的変更

Redux Storeから取得したユーザー情報を使って、ヘッダーの切り替えを行います。

以下の条件で、ナビゲーションを変えました。

<ログインしていない時>
Login/Sign-upを表示

<ログインしている時>
ユーザー名/Logoutを表示

ただし、現状だとログインしていない時のナビゲーションを出すことが不可能なので、LayoutページからRedirect処理を削除します。

コメントアウトした部分を消してください。

検証

ナビゲーションの検証をしましょう。

大丈夫そうですね。なお、Profileページは作成していないので、空欄でOKです。

次回

次回は、ヘッダーのコンポーネントを実装しましょう

Reactまとめ

記事

参考書籍


ソースコード

Nav.tsx

Layout.tsx

コメントを残す