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

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

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

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

[React/NextJS]~画面開発まとめ~

<目次>

前回

[React]~Ambassador画面2: Redux、ルーティング、ログイン、ユーザー処理を実装しよう!~

// components/Nav.tsx

const Nav = () => {
	let menu

	menu = (
		<div className="col-md-3 text-end">
			<button type="button" className="btn btn-outline-primary me-2">Login</button>
			<button type="button" className="btn btn-primary">Sign-up</button>
		</div>
	)

	return (
		<div className="container">
			<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">

			<ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
				<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>
				<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>
			</ul>
			</header>
  		</div>
	)
}

export default Nav

// components/Nav.tsx

const Nav = () => {

let menu

menu = (

<button type="button" className="btn btn-outline-primary me-2">Login</button>

</div>

)

return (

<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>

<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>

</ul>

</header>

</div>

)

}

export default Nav

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

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

Redux Storeへ接続

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

// components/Nav.tsx
import { connect } from 'react-redux'
import { User } from '../models/user'

// propsをつける
const Nav = (props: {user: User}) => {
...
}

// Redux StoreからUser情報を取得する
export default connect(
	(state: {user: User}) => ({
		user: state.user
	})
)(Nav)

// components/Nav.tsx

import { connect } from 'react-redux'

import { User } from '../models/user'

// propsをつける

const Nav = (props: {user: User}) => {

...

}

// Redux StoreからUser情報を取得する

export default connect(

(state: {user: User}) => ({

user: state.user

})

)(Nav)

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

ヘッダーの動的変更

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

// components/Nav.tsx
import { useState } from 'react'
import { connect } from 'react-redux'
import { User } from '../models/user'
import { Link, Redirect } from 'react-router-dom'
import axios from 'axios'

const Nav = (props: {user: User}) => {
	const [redirect, setRedirect] = useState(false)

	const logout = async () => {
		await axios.post('logout')
		setRedirect(true)
	}

	if (redirect) {
		return <Redirect to={'/login'} />
	}

	let menu

	if (props.user?.id) {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/profile'} href="#" className="btn btn-primary">
					{props.user.first_name} {props.user.last_name}
				</Link>
				<a
					href="#" className="btn btn-outline-primary me-2"
					onClick={logout}
				>
					logout
				</a>
			</div>
		)
	} else {
		menu = (
			<div className="col-md-3 text-end">
				<Link 
            to={'/login'} className="btn btn-outline-primary me-2">Login</Link>
				<Link to={'/register'} className="btn btn-primary">Sign-up</Link>
			</div>
		)
	}
...
}

// components/Nav.tsx

import { useState } from 'react'

import { connect } from 'react-redux'

import { User } from '../models/user'

import { Link, Redirect } from 'react-router-dom'

import axios from 'axios'

const Nav = (props: {user: User}) => {

const [redirect, setRedirect] = useState(false)

const logout = async () => {

await axios.post('logout')

setRedirect(true)

}

if (redirect) {

return <Redirect to={'/login'} />

}

let menu

if (props.user?.id) {

menu = (

{props.user.first_name} {props.user.last_name}

</Link>

href="#" className="btn btn-outline-primary me-2"

onClick={logout}

logout

</a>

</div>

)

} else {

menu = (

<Link

to={'/login'} className="btn btn-outline-primary me-2">Login</Link>

</div>

)

}

...

}

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

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

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

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

// components/Layout.tsx
...

const Layout = (props: any) => {
	const userURL = 'user'
	// const [redirect, setRedirect] = useState(false)

	useEffect(() => {
		(
			async () => {
				try {
					const { data } = await axios.get(userURL)
					props.setUser(data)
				} catch(e) {
					console.log(e)
					// setRedirect(true)
				}
			}
		)()
	}, [])

	// if (redirect) {
		// return <Redirect to={'/login'} />
	// }

	return (
		...
	)
}
...

// components/Layout.tsx

...

const Layout = (props: any) => {

const userURL = 'user'

// const [redirect, setRedirect] = useState(false)

useEffect(() => {

(

async () => {

try {

const { data } = await axios.get(userURL)

props.setUser(data)

} catch(e) {

console.log(e)

// setRedirect(true)

}

)()

}, [])

// if (redirect) {

// return <Redirect to={'/login'} />

// }

return (

...

)

}

...

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

検証

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

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

次回

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

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

Reactまとめ

記事

[React/NextJS]~画面開発まとめ~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

Nav.tsx

// components/Nav.tsx
import { useState } from 'react'
import { connect } from 'react-redux'
import { User } from '../models/user'
import { Link, Redirect } from 'react-router-dom'
import axios from 'axios'

const Nav = (props: {user: User}) => {
	const [redirect, setRedirect] = useState(false)

	const logout = async () => {
		await axios.post('logout')
		setRedirect(true)
	}

	if (redirect) {
		return <Redirect to={'/login'} />
	}

	let menu

	if (props.user?.id) {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/profile'} href="#" className="btn btn-primary">
					{props.user.first_name} {props.user.last_name}
				</Link>
				<a
					href="#" className="btn btn-outline-primary me-2"
					onClick={logout}
				>
					logout
				</a>
			</div>
		)
	} else {
		menu = (
			<div className="col-md-3 text-end">
				<Link to={'/login'} className="btn btn-outline-primary me-2">Login</Link>
				<Link to={'/register'} className="btn btn-primary">Sign-up</Link>
			</div>
		)
	}


	return (
		<div className="container">
			<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">

			<ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
				<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>
				<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>
			</ul>
			{menu}
			</header>
  		</div>
	)
}

export default connect(
	(state: {user: User}) => ({
		user: state.user
	})
)(Nav)

// components/Nav.tsx

import { useState } from 'react'

import { connect } from 'react-redux'

import { User } from '../models/user'

import { Link, Redirect } from 'react-router-dom'

import axios from 'axios'

const Nav = (props: {user: User}) => {

const [redirect, setRedirect] = useState(false)

const logout = async () => {

await axios.post('logout')

setRedirect(true)

}

if (redirect) {

return <Redirect to={'/login'} />

}

let menu

if (props.user?.id) {

menu = (

{props.user.first_name} {props.user.last_name}

</Link>

href="#" className="btn btn-outline-primary me-2"

onClick={logout}

logout

</a>

</div>

)

} else {

menu = (

<Link to={'/login'} className="btn btn-outline-primary me-2">Login</Link>

</div>

)

}

return (

<li><a href="#" className="nav-link px-2 link-secondary">Frontend</a></li>

<li><a href="#" className="nav-link px-2 link-dark">Backend</a></li>

</ul>

{menu}

</header>

</div>

)

}

export default connect(

(state: {user: User}) => ({

user: state.user

})

)(Nav)

Layout.tsx

// components/Layout.tsx
import { Dispatch, useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { User } from '../models/user'
import { setUserAction } from '../redux/actions/setUserAction'
import Nav from './Nav'
import Header from './Header'
import axios from 'axios'

const Layout = (props: any) => {
	const userURL = 'user'

	useEffect(() => {
		(
			async () => {
				try {
					const { data } = await axios.get(userURL)
					props.setUser(data)
				} catch(e) {
					console.log(e)
				}
			}
		)()
	}, [])

	return (
		<div>
			<Nav />
			<main>
				<Header />
				<div className="album py-5 bg-light">
					<div className="container">
						{props.children}
					</div>
				</div>
			</main>
		</div>
	)
}

// State
const mapStateToProps = (state: {user: User}) => ({
	user: state.user
})

// Dispatch
const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
	// setUser(Action)->dispatch
	setUser: (user: User) => dispatch(setUserAction(user))
})

// LayoutコンポーネントをRedux Storeに登録
export default connect(mapStateToProps, mapDispatchToProps)(Layout)

// components/Layout.tsx

import { Dispatch, useEffect, useState } from 'react'

import { connect } from 'react-redux'

import { User } from '../models/user'

import { setUserAction } from '../redux/actions/setUserAction'

import Nav from './Nav'

import Header from './Header'

import axios from 'axios'

const Layout = (props: any) => {

const userURL = 'user'

useEffect(() => {

(

async () => {

try {

const { data } = await axios.get(userURL)

props.setUser(data)

} catch(e) {

console.log(e)

}

)()

}, [])

return (

<div>

<Nav />

<main>

{props.children}

</div>

</main>

</div>

)

}

// State

const mapStateToProps = (state: {user: User}) => ({

user: state.user

})

// Dispatch

const mapDispatchToProps = (dispatch: Dispatch<any>) => ({

// setUser(Action)->dispatch

setUser: (user: User) => dispatch(setUserAction(user))

})

// LayoutコンポーネントをRedux Storeに登録

export default connect(mapStateToProps, mapDispatchToProps)(Layout)

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

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

前回

ナビゲーション

Redux Storeへ接続

ヘッダーの動的変更

検証

次回

Reactまとめ

参考書籍

ソースコード

Nav.tsx

Layout.tsx

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

ナビゲーション

Redux Storeへ接続

ヘッダーの動的変更

検証

次回

Reactまとめ

参考書籍

ソースコード

Nav.tsx

Layout.tsx

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

CSSでページの背景色を二分割にする方法をご紹介します!

[golang]Interfaceのオススメの使い方3 ~暗黙的な実装でカス…

Go言語とVue.jsで作るユーザー認証アプリ~バックエンド開発編Vol4~

[React]~Ambassador画面6:Productページの実装~

VueJsのライフサイクルフック

GitLab RunnerのパイプラインでDocker daemonに接続で…

CSSでブロックをスタイリング!

Go言語 ~基礎編~ GoroutineとChannel

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル